web-dev-qa-db-ja.com

完全なコールバックで画像をロードするjQuery

Ben Nadelのブログへのコメント Stephen Rushingがローダーを投稿した場所を見ましたが、セレクターとパラメーターを渡す方法がわかりません。completeCallback関数とerrorCallback関数も必要だと思いますか？

function imgLoad(img, completeCallback, errorCallback) {
    if (img != null && completeCallback != null) {
        var loadWatch = setInterval(watch, 500);
        function watch() {
            if (img.complete) {
                clearInterval(loadWatch);
                completeCallback(img);
            }
        }
    } else {
        if (typeof errorCallback == "function") errorCallback();
    }
}
// then call this from anywhere
imgLoad($("img.selector")[0], function(img) {
    $(img).fadeIn();
});

HTML：

<a href="#" class="tnClick" ><img id="myImage" src="images/001.jpg" /></a>

JS：

$(document).ready(function() {
    var newImage = "images/002.jpg";
    $("#myImage").css("display","none");
    $("a.tnClick").click(function() {
        // imgLoad here
    });
})
jqueryimageloadcomplete
10
FFish

表示する前にロードする場合は、次のように大幅に削減できます。

_$(document).ready(function() {
    var newImage = "images/002.jpg"; //Image name

    $("a.tnClick").click(function() {
      $("#myImage").hide() //Hide it
        .one('load', function() { //Set something to run when it finishes loading
          $(this).fadeIn(); //Fade it in when loaded
        })
        .attr('src', newImage) //Set the source so it begins fetching
        .each(function() {
          //Cache fix for browsers that don't trigger .load()
          if(this.complete) $(this).trigger('load');
        });
    });
});
_

.one()呼び出しは、.load（）が1回だけ起動することを確認するため、重複するフェードインはありません。最後の.each()は、一部のブラウザがキャッシュからフェッチされた画像に対してloadイベントを発生させないためです。これは、投稿した例のポーリングでも実行しようとしていることです。

40
Nick Craver

画像がブラウザのキャッシュで見つかった場合IEおよび（言われている）Chromeはしないので、画像のロードイベントを使用するときは注意する必要があります期待どおりにイベントを発生させます。

私は自分でこの問題に直面しなければならなかったので、DOM属性が完了していることを確認することで解決しました（ほとんどの主要なブラウザーで機能していると言われています）。trueに等しい場合は、以前にバインドされた「load」イベントのバインドを解除しました。例を参照してください。

$("#myimage").attr("src","http://www.mysite.com/myimage.jpg").load(doSomething);

if ($("#myimage").get(0).complete) {

    // already in cache?
            $("#myimage").unbind("load");
            doSomething();


}

お役に立てれば

4
mario-mesiti

私はこの機能が欲しかったのですが、ページがレンダリングされるときにすべての画像をロードする必要は絶対にありませんでした。私の画像はAmazons3にあり、大きなフォトギャラリーがあるので、不必要なリクエストがたくさんあります。私はそれを処理するための簡単なjQueryプラグインを作成しました ここ ：

$("#image-1").loadImage('/path/to/new/image.jpg',function(){  
  $(this).css({height:'120px'});//alter the css styling after the image has loaded
});

したがって、基本的に、ユーザーが一連の画像を表すサムネイルをクリックするたびに、その時点で他の画像を読み込みます。コールバックを使用すると、画像が読み込まれた後にcssを変更できます。

1
jamescharlesworth

これを試してみませんか？

doShow = function() {
  if ($('#img_id').attr('complete')) {
    alert('Image is loaded!');
  } else {
    window.setTimeout('doShow()', 100);
  }
};

$('#img_id').attr('src', 'image.jpg');
doShow();

上記はどこでも機能するようです...

0
Jay