Ausblenden Bilder, bis Sie geladen sind

Bekam ich ein jQuery-script, das dinamically Anhängen von Daten an die "Halter" an einigen timeinterval. Die Daten sieht wie folgt aus:

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

und ich bin beladen wie 50 Bilder auf einmal, mein Ziel ist es Ihnen fadeIn, wenn jedes Bild wird geladen.

Ich habe versucht, die folgenden:

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

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

scheint aber, dass on Methode nicht load oder ready Methoden. Ich lief aus Ideen.

  • Sind Sie sicher, dass Sie nicht die Befestigung der Zuhörer, nachdem das Bild bereits geladen?
  • Sie sollten wählen Sie eine Antwort aus
InformationsquelleAutor Deepsy | 2014-02-12
  1. 5

    nur legen Sie die onload-Eigenschaft, wenn Sie fügen Sie das Bild.

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

    siehe Beispiel arbeiten hier

    • Das wird nicht wirklich funktionieren, wenn ich bin laden der Elemente dinamically. Sehen Sie die Vorgestellte Geige.
    • Überprüfen Sie die aktualisierte Antwort. Ich biete eine funktionierende Geige.
    InformationsquelleAutor Paul Martin
  2. 1

    Können Sie Ihre Bilder, die in der ersten geladen-zuerst der Reihenfolge angezeigt, wie diese:

    Demo: http://jsfiddle.net/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];
}
    InformationsquelleAutor markE
Schreibe einen Kommentar