3

私はフォト ギャラリーを構築していますが、コンテンツの "DIV" 要素がビューポートに入ったときにのみ画像を読み込みたいと考えています。これには jquery viewport.js を使用しています。

デフォルトでは、各「IMG」タグのsrc属性を「LOADING.JPEG」に設定しており、divがビューポートに入ると、IMGタグのsrc属性を実際の画像に変更します.しかし、SRC属性を変更した後、画像は変更されません変更してもLOADING.JPEGが表示されます。

$(".content").each(function(i,obj){
     var element = obj.id;
     if($("#"+element).is(':in-viewport')){
         var link = $("#"+element+" div a").attr('href');
         //set the image src from loading to read image
         $("#"+element+" div a img").attr('src',link);
     }
});

どんな助けや提案も大歓迎です。

ありがとう

4

2 に答える 2

2

なぜあなたはそれを複雑にしているのですか？これを試して -

$(".content").each(function(i,obj){  
     if($(this)).is(':in-viewport')){
         var link = $("div a",this).attr('href');
         //set the image src from loading to read image
         $("div a img",this).prop('src',link);
     }
});
于 2013-04-22T17:22:57.793 に答える
0

Lazy Load jQuery プラグインを試してみましたか?

これにより、一部の画像がビューポートにあるときに徐々にフェード インします。セットアップも簡単で、各画像のデータ属性を呼び出すだけです。

<img class="lazy" data-original=“img/example.jpg” src=“img/grey.gif” width=“640” height=“480”&gt;

そしてそれをそのように開始します：

$("img.lazy").lazyload();
于 2013-04-26T10:34:51.003 に答える