web-dev-qa-db-ja.com

jQuery LazyLoadはスクロールするまで画像をロードしません

jQuery LazyLoadは、1pxでもページをスクロールするまで、開いているページの表示部分に画像をロードしません。

ページをスクロールすると、すべて正常に機能します

更新：

CoffeScript

_jQuery ->
   $("img.lazy").show().lazyload()
   $(window).resize()
_

しかし$(window).resize()は、ページが読み込まれたときにブラウザのコンソールから入力した場合にのみ役立ちます

jquerylazy-loading
15
Alexey

画像には幅と高さを設定する必要があります。

3
Mika Tuupola
$("img.lazy").lazyload({
             threshold : 50
         });

そしてこれを追加してください：

$(window).load(function(){
     $("html,body").trigger("scroll");
});
21
Mario Gonzales Flores

手遅れですが、この問題が引き続き発生する場合は、必要なイベントで純粋なjavascript setTimeout（）とwindow.scrollBy（）の組み合わせを使用してください。タブ付きペインの下に画像を表示する必要があったので、私はそれを解決しました。最初にロードされたタブだけがページのロード時に画像を表示し、ユーザーが少しスクロールするまでクリックしても残りのタブは表示されませんでした。私のコードは以下です：

function myFunction() {
  setTimeout(function() {
    window.scrollBy(0, 100)
  }, 1000);;
}
<style>
  div {
    background-color: #FF9900;
    height: 999px;
    width: 100%;
  }
</style>

<a href="#" onClick="myFunction()">Click me to scroll after 1000 milliseconds</a>
<div></div>
3
Kashif Tufail

これを試して....

$(function() {
    $("img.lazy").show().lazyload()
    window.onload = function() {
        $(window).resize()
    };
});
3
Archer

これは私にとってこの問題を解決したものです：

$("html,body").on('scroll', function(){ 
    $(window).resize() 
});

とてもシンプルで、bodyタグとhtmlタグからのscrollイベントでwindow.resizeを作成するだけです。バム。

2
dansch

Lazyloadの現在のバージョンは、ウィンドウロードイベント時に初期更新をトリガーします。したがって、後で動的にイメージをロードする場合、更新サイクルをトリガーするためにスクロールなどの追加のイベントが必要です。これは、スクロール後にのみ画像が表示されるという私の問題でした。

2
Mark

特定の項目でフィルタリングするたびに$.post()クエリを通じて画像を取得するため、リロードのたびにすべてを実行する必要があります

$.post( "queries.php", { var1:var1, var2:var2, .. }, function(response){
  for( var i=0; i<response.length; i++ ) { $("#container").append(response[i]); }
  $("img.lazy").lazyload();
  $(window).resize();
}, "json");
0
ppseprus

Z-indexで並べられた複数の画像を持つスライダーの場合、lazyloadオプションfailure_limitが重宝します。

このオプションの詳細は ここ です。

0
Binod Kalathil

Lazyloadを初期化するときに、どのイベントでトリガーするかを指定できます（デフォルトでは「スクロール」に設定されています）。そのリストにカスタムイベントを追加して、意味のあるときにいつでもトリガーすることをお勧めします。

$('.lazy').lazyload({
    event: 'scroll whenever-i-want'
});

// whenever you want to trigger your event (after ajax load, on dom ready, etc...)
$(document).trigger('whenever-i-want');

これにより、デフォルトのスクロール機能がそのまま残りますが、オンデマンドで遅延読み込みをトリガーすることもできます。

0
Towers
$(document).ready(function () {
$("img.lazy").lazyload({
<br/>placeholder: rooturl + "Themes/images/imgloading.gif",<br/>
                 effect: "fadeIn",<br/>
                 skip_invisible: false<br/>
                 });<br/>
        });<br/>

$(document).ready(function() {<br/>
       $(window).load(function() {<br/>
             update();<br/>
         }); <br/>
  });<br/>

この遅延ロードスクリプトを使用 https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.js#L1

0
RGS

この SO質問 にあるように、skip_invisibleをfalseに設定すると問題が解決しました

0
Pierre