img preload not work in ie7, ie8 [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 11 years ago.

preload = function() {

        var imgList = [];
        var imgArr = [];
        var imageSize = element.find('img').size();
        var loadImgList = element.find('img');
        for(i=0; i<imageSize;i++){
            imgArr.push($(loadImgList[i]).attr('src'));
        }

        var total = imgArr.length;
        var loaded = 0;

        for(var i in imgArr) {
            imgList.push($("<img />")
                .attr("src", imgArr[i])
                .load(function() {
                    loaded++;
                    if(loaded == total) {
                        element.find('.loader').fadeOut('slow');
                        init();
                    }
                })
开发者_StackOverflow社区            );
        }

    }

---

I don't know whether this solves your problem since you're not saying what exactly doesn't work, but you need to set src after you define the handler for the onload event.

Also, note that .load() has numerous issues when used with images as outlined in the jQuery docs:

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

---

Why not go for a no-javascript solution? Something like this:

<!-- Preload Images -->
<div style="display: none; width:1px; height:1px;">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" /> 
</div>

Works very well for me. :)