The image slideshow functions perfectly on all web browsers except for Internet Explorer

Having trouble with my image slideshow not working in Internet Explorer. It works fine in other browsers, but in IE it only displays the primary image. Any help would be greatly appreciated!

Thank you

Mickeyjay.

Here is the code snippet:

<div id="image_slide"><img src="images/.......jpg" id="slideit" name="slideit" border="0">
<script type="text/javascript">
var dimages=new Array();
  var numImages=3;
  dimages[0]=new Image();
  dimages[0].src="images/.......jpg";
  dimages[1]=new Image();
  dimages[1].src="images/.......jpg";
  dimages[2]=new Image();
  dimages[2].src="images/.......jpg";
var curImage=-1;
function swapPicture()
{
  if (document.images)
  {
    var nextImage=curImage+1;
    if (nextImage>=numImages)
      nextImage=0;
    if (dimages[nextImage] && dimages[nextImage].complete)
    {
      var target=0;
      if (document.images.slideit)
        target=document.images.slideit;
      if (document.all && document.getElementById("slideit"))
        target=document.getElementById("slideit");
      if (target)
      {
        target.src=dimages[nextImage].src;
        curImage=nextImage;
      }
      setTimeout("swapPicture()", 1500);
    }
    else
    {
      setTimeout("swapPicture()", 150);
    }
  }
}
setTimeout("swapPicture()", 1500);
</script>

Answer №1

Consider attempting this streamlined assessment, where the concept involves preloading your images before initiating the swapping process, eliminating the need to test .complete in that manner.

<html>
  <head>
    <title>Sample</title>
  </head>
  <body>

  <div id="image_slide"><img src="intro.jpg" 
       id="slideit" name="slideit" border="0"></div>

  <script type="text/javascript">
    var curImage  = -1;
    var numImages = 2;
    var dimages   = new Array();

    function loadPictures()
    {
      dimages[0]     = new Image();
      dimages[0].src = "test1.jpg";
      dimages[1]     = new Image();
      dimages[1].src = "test2.jpg";

      setTimeout(swapPicture, 3000);
    }

    function swapPicture()
    {
      var nextImage = curImage + 1;
      if (nextImage >= numImages)
          nextImage = 0;

      document.images.slideit.src = dimages[nextImage].src;
      curImage = nextImage;
      setTimeout(swapPicture, 1500);
    }

    setTimeout(loadPictures, 1500);

  </script>

  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

{ Node.js and Express - Preventing Duplicate Requests } How to fix the issue of sending client-side requests twice

I'm currently diving into nodejs but this frustrating bug is driving me crazy!! Every time I try to make a POST request on my website, it ends up sending two requests instead of one. Initially, I suspected it was an issue with my connection to mongodb ...

What are some methods for deactivating linked clicks while activating alternative links?

I am trying to prevent a link from being clickable after it has been clicked. Here is the code I have: <a class="cmd-7" href="?cmd=7" style="color:#00F; margin-left:15px; text-decoration:underline">Past 7 Days</a> <a class="cmd-14" href="? ...

The error message states that the object function defined as `(req, res, next) { app.handle(req, res, next); }` does not contain the method 'configure'

Could somebody help me understand why I encounter this error when attempting to execute the code below? var express = require('express'); var login = require('./routes/login'); var app = express(); //all configurations app.confi ...

Class-based Button Transition Effect failing to operate as intended

I want to trigger these 3 events simultaneously when a form is filled out, all initiated by the same button. I have been able to make it work using 3 classes named: "draw dj", which represents the first event "draw1 dj", which signifies the 2nd event "d ...

AJAX form encountered a bad request error with code 400

JavaScript Issue: function submitForm(){ var data = { name: _("#name").value, email: _("#email").value, message: _("#message").value } var output = JSON.stringify(data); var ajax = new XMLHttpRequest(); ajax.open( "POST", "/src/scripts/pa ...

Anomalous behavior of buttons in react-redux

Currently, I have a basic counter set up in react-redux as part of my learning process with these frameworks. My goal is to create a pair of number input fields that determine the payload for an increment/decrement action sequence. The intended outcome is ...

Tips for resolving the error message "TypeError: props.scoreboard.map is not a function" that only occurs after refreshing the page

I'm encountering an unusual problem while attempting to iterate over the response from my backend. Despite logging the response as an array, I still face issues similar to those where the response is not considered an array. I am passing the scoreboa ...

Adjust the size of the input field as text is being typed in

Can a text input box be automatically resized as text is entered? I've been looking online but haven't come across any solutions. ...

Using the same marker in React-Leaflet across different layers

Is there a way to add the same marker in multiple Layers using react-leaflet? For instance: In my restaurant search app built with react leaflet, each marker represents a different restaurant. I am looking to have a LayerControl that allows filtering by ...

React-xarrows is a stunning display of multiple arrows overlapping each other in a mesmerizing fashion

I am currently using the react-xarrows library within my project to connect tables in a diagram. However, I have encountered an issue where multiple links between two tables cause the arrows to overlap, resulting in only one visible link instead of the int ...

Verify the middleware is connected to the express endpoint during the unit test

How can I verify that the middleware is properly attached to the route in my unit test below? The server .. var express = require('express'); var http = require('http'); var app = express(); var server = http.createServer(app); var P ...

Adjust the size of each link in the highchart network diagram

Is it feasible to individually set the length of each link in a network graph using highcharts? I am interested in creating a visualization where each user is displayed at varying distances from the main center user. I have been experimenting with the lin ...

Altering the location display on an HTML5 map through user selection from a dropdown menu

I'm currently working on a school project that involves coding. I've successfully implemented geolocation code to display the user's location upon page load. Now, I need to add a drop-down box that allows users to select from three additiona ...

Unpredictable image sorting tool

Can someone recommend a plugin that functions similarly to the logos placement after the video section on this website: ? I really admire the way they have implemented it and would like to find something similar for my own project. ...

Tips on ensuring data cleanliness in jQuery input fields

Before sending the ajax request, I want to sanitize the form fields for added security. Currently, my Javascript code looks like this: jQuery(document).ready(function($) { $('#login-form').submit(function(e) { e.preventDefault(); // pr ...

Failure to Reach AngularJS ng-click Function

When trying to add a new product to the product list, I am facing an issue. The products load correctly but the ng-click function is not being triggered. (The alert I set up in the addProduct function is not appearing). HTML <div ng-controller="Produc ...

Preventing the "save" button from being enabled until a change has been made to at least one input field

I have a page with approximately 20 input fields, along with save and register buttons. Is there a way to activate the "save" button only when a change has been made in at least one of the fields? ...

The angular.json file contains a script and a styles property

After encountering issues with adding styles and scripts to my angular.json file, I discovered that neither Bootstrap nor other scripts were taking effect. It turns out there are two places where you can define scripts and styles in the angular.json file a ...

Error message: Unable to locate local module in node.js subdirectory

Exploring the folder structure within my application https://i.stack.imgur.com/Pkxpg.png Referring to app_modules/bar and app_modules/foo as local modules Root Folder package.json "dependencies": { "body-parser": "~1.18.2", "cookie-parser": "~ ...

Ajax, form submission via a hyperlink redirecting to the current page

Initially, I have a form that can be submitted with the following code: <form method="post" action="javascript:void(0);" id="productFrom<?php echo $x;?>"> <input type = "hidden" value="<?php echo $MenuItem['Item_ID']?>" ...