1

次の Javascript は、画像をプリロードし、div の背景を画像に設定してから、div 全体をフェードインすることを目的としています...

$("<img/>")
    .attr("src", "../services/imageResize.php?img=" + img + "&width=150")
    .load(function(e){
        $("<div/>", {
            class: "smallThumb"
        })
        .css("background", "url(" + $(this).attr("src") + ") no-repeat center center")
        .appendTo(images)
        .fadeIn(500);

        if(count == imgTotal)
        {
            loadingImages = false;
            images.css("background","#fff");
        }
    });
count++;

Chrome と Safari でテストしました。どちらも div をフェードインしてから、画像の読み込みを終了します。.css ステートメントのイメージをリロードする原因について当惑しています。

4

3 に答える 3

0

onload問題は、画像が完全に読み込まれる前にイベントが発生することだと思います。画像が完全に読み込まれていると仮定すると、再読み込みしているように見えます。

クッパが画像をレンダリングする準備ができているときはimg.onloadいつでもトリガーされます。イメージが完全に読み込まれることを保証するものではありません。画像が完全に読み込まれたかどうかをテストする唯一の方法は、img.complete属性を使用することです。

しばらく前に、完全にロードされた状態のイメージソースを監視する方法についての質問に答えました

答えの後、属性を利用する小さなjQueryプラグインcompleteを書きました。

たとえば、次のように使用できます

$(function () {
    $.preload('your-image.png').progress(function (img) {
        // set background
        $('body').css('background', 'url(' + img.src + ')');
    });
});
于 2013-05-27T18:18:53.847 に答える