CODEWITHSUNDEEP
jquery
user1448031
user1448031

Reputation: 2166

jQuery load() function not working on images with mouseover

I am trying to do this:

$("#home .items:last-child img").load(function() { ....... });

The img tag looks like this:

<img onmouseout="this.src = '/images/IMG01.jpg'" onmouseover="this.src = '/images/IMG02.jpg'" src="/images/IMG01.jpg" alt="" />

In Firefox, Chrome and Opera, it seems to be working fine. However in Safari and IE10, it's not working. In these 2 browsers, the load() function gets activated only upon mouseover action. It looks like it is waiting for the mouseover image to load. How do I make sure this works?

Upvotes: 0

Views: 61

Answers (1)

Ruan Mendes
Ruan Mendes

Reputation: 92304

The problem is likely that your image is cached and therefore, it doesn't need to be loaded. jQuery documentation states that load is not reliable across browsers:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

  • It doesn't work consistently nor reliably cross-browser
  • It doesn't fire correctly in WebKit if the image src is set to the same src as before
  • It doesn't correctly bubble up the DOM tree
  • Can cease to fire for images that already live in the browser's cache

Some suggest adding a cachebuster to your image URL. However, you lose the benefit of caching http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/

I think a less problematic approach is to poll the image.complete property to know that an image has finished loading.

function waitUntilComplete(img, cb) {
    if (img.complete) {
      cb(img)
    }
    else {
        setTimeout(function() {
            waitUntilComplete(img, cb);
        }, 100); // Whatever polling delay you'd like
    }
}

See http://jsfiddle.net/LTjPB/2/

Upvotes: 2

Related Questions