checking for loaded images jQuery

Question

I am trying to detect when a group of images has loaded within a div.

if($("#venues-page").get(0)) {
    var img = $('#venues-page .venues img');
    var length = img.length;
    img.load(function(){
        length--;
        console.log(length);
        if(length === 0){
            console.log("here");
            $(".lattice").fadeIn(1000);
            $("#venues .venue a").css("display", "block");
            $("#venues-page .venues img").not('.lattice').fadeIn(500);
        }
    });
}

This seems to work fine when the images are cached in the browser, however if the user has not visted the site before the images never seem to all load without refresh after refresh after refresh.

Is there a better to make sure all the images are loaded within a div, and the do stuff based on that?

I would imagine the problem is with the `length` var not being defined when the callback is executed - try using a global variable and testing it — Manse, Dec 13 '12 at 12:06
Check out the answers in http://stackoverflow.com/questions/12905038/jquery-alternative-to-bindload-for-use-with-images — Nelson, Dec 13 '12 at 12:10

score 0 · Answer 1 · answered Dec 13 '12 at 13:06

You might be missing some code here.

1) Your code should be wrapped under

$(function(){ 


});

2) Instead of

img.load(function () {

try

img.one("load", function () {
OR 
img.on("load", function () {

I tried using your code and it worked fine. Let me know if you still face any issues.

checking for loaded images jQuery

1 Answers1