5

かなり大きな画像を入れ替えるページがあります。ページが最初に読み込まれるときにプリロードするには多すぎるため、オプションではありません。だから私がする必要があるのは、ユーザーが要求したときにそれらをロードすることです。現在、jQuery を使用して を置き換えていimgますsrc。これは問題なく動作しますが、読み込んでいる画像は約 500KB になる可能性があり、ダウンロード中に画面が塗りつぶされるため見栄えが悪くなります。私がやりたいのは、画像の読み込み中に読み込み中の gif をページにポップし、画像が読み込まれると読み込み中の gif が消えるようにすることです。私はそれを行う方法を見つけるのに苦労しています。これは私が持っているJS/jQueryコードで、src.

var product = "bowl";
var image = "dog.jpg"; //this is actually pulled from a data attribute, but its just hardcoded here for an example

$("#images img[data-product="+product+"]").attr("src", "/img/tablesetting/"+image);
4

3 に答える 3

4

この原則を示す実用的なjsfiddleを作成しました

http://jsfiddle.net/kasperfish/c72RT/4/

私は最近、同じことをする必要がありました。基本的に、画像をコンテナー div でラップしました。コンテナー内に、ajax ローダー gif が埋め込まれた span 要素を追加しました。このスパンは最初は非表示にする必要がありますが、ajax リクエストが行われると表示されます。画像が完全に読み込まれると、スパンが削除されます。

ajax呼び出し前

 $('#your_image_container').find('span').show();

成功した

 $('#your_image').attr('src', 'your/image/url').load(function() {

      $('#your_image_container').find('span').fadeOut(); 

  });

この原則を示すjsfiddleを作成しました

http://jsfiddle.net/kasperfish/c72RT/4/

于 2013-09-19T20:41:34.320 に答える
1

画像をプリロードします。

var product = "bowl";
var imageSrc = "dog.jpg";
var imgEl = $("#images img[data-product="+product+"]");
// show loading graphic only if it's needed
var timer = setTimeout(function(){
    imgEl.attr("src", "/img/loading.gif");
},50);

// preload image
var img = new Image();
img.onload = function() {
    clearTimeout(timer);
    imgEl.attr("src",imageSrc);
}
img.src = imageSrc;
于 2013-09-19T20:36:55.130 に答える
0 
$img.attr("src", newImage);

if (!$img.get(0).complete) {
    $img
        .hide()
        .after("<img src=throbber>")
        .on("load", function () {
             $(this).show().next().remove();
         });
}
于 2013-09-19T20:24:51.017 に答える