IE - Javascript to change IMG SRC cancels existing loading bar

Question

Hi there, I've come across an obscure problem where many of the pages on my company's website take several seconds up to several minutes to load. Ordinarily, one would expect a browser's native progress bar to continue spinning until all outstanding requests have finished, but IE will stop the progress bar when ANY request returns. And yes, this has to work with IE. Our site has some javascript (jQuery) that changes a DOM element's background-image when another element is mouse-over'd, which causes IE to send a request and thus interrupts the existing progress bar.

Exact sequence of events:

1. Click link with long load time (progress bar spins correctly)

2. Move the mouse about the page while waiting, inadvertently triggering an image change (progress bar stops)

3. Customer complains that page stopped loading

So, any ideas? One approach I thought would be to change the mouse cursor to waiting when a link is pressed, and to change the cursor back to a normal cursor if the browser's stop button is pressed. However, it doesn't seem to be too easy to detect if the user presses the stop button . . . The only other option I can think of is to stop the background image from changing once a link has been clicked, but that is a very lame approach.

Thanks for the help :)

Answer 1

One approach would be to move your image hovers from $(document).ready to $(document).load.

A better solution would be to use sprites as your image with an on and off state for hovering so you don't need to change the image source. Here's a quick example of using jQuery to handle a sprite:

css (assumes image as 100x200 with each state being 100x100)

.my-image { height: 100px; width: 100px; background: transparent url('/path/to/img.jpg') 0 0 no-repeat; overflow: hidden; }
.my-image-hover { background-position: 0 -100px !important; }

jquery

// add class hover to image
$('.my-image').hover(function() {
    $(this).addClass('my-image-hover');
}, function() {
    $(this).removeClass('my-image-hover');
});