javascript - Hide images until they're loaded - Stack Overflow

admin管理员组

文章数量:1357583

I got a jQuery script which is dinamically appending data to the "holder" at some timeinterval. The data looks like this:

<div class="item-box etc etc"> <img src="data.png"> </div>

and I'm loading like 50 images at once, my goal is to make them fadeIn, when each image is loaded.

I've tried the following:

parentDiv.on("load", "img", function() {
    $(this).parent().fadeIn(500);
});

Fiddle: /

but seems that on method doesn't have load or ready methods. I ran out of ideas.

I got a jQuery script which is dinamically appending data to the "holder" at some timeinterval. The data looks like this:

<div class="item-box etc etc"> <img src="data.png"> </div>

and I'm loading like 50 images at once, my goal is to make them fadeIn, when each image is loaded.

I've tried the following:

parentDiv.on("load", "img", function() {
    $(this).parent().fadeIn(500);
});

Fiddle: http://jsfiddle/3ESUm/2/

but seems that on method doesn't have load or ready methods. I ran out of ideas.

• javascript
• jquery
• html
• fadein
• image-loading

Share Improve this question Follow edited Feb 12, 2014 at 18:52 Deepsy asked Feb 12, 2014 at 18:31 DeepsyDeepsy 3,81088 gold badges4343 silver badges7272 bronze badges 2

• Are you sure you're not attaching the listener after the image has already loaded? – Paul S. Commented Feb 12, 2014 at 18:33
• you should choose an answer – Paul Martin Commented Feb 19, 2014 at 19:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

just set the onload property when you add the image.

var img = new Image();
img.src = "some url"
img.onload=function(){$(img).fadeIn(500);}
document.getElementByID('parent').appendChild(img);

see working example here

You can add your images in first-loaded-first displayed order like this:

Demo: http://jsfiddle/m1erickson/7w6cb/

var imageURLs=[];
var imgs=[];
imageURLs.push("house100x100.png");
imageURLs.push("house32x32.png");
imageURLs.push("house16x16.png");

for(var i=0;i<imageURLs.length;i++){

    imgs.push(document.createElement("img"));
    imgs[i].onload=function(){
        var id=this.myId;
        this.id=id;           
        document.body.appendChild(this);
        $("#"+id).hide().fadeIn(1500);
    }
    imgs[i].myId=i;
    imgs[i].src=imageURLs[i];
}

本文标签： javascriptHide images until they39re loadedStack Overflow