15

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

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

アップデート：

CoffeScript

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

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

4

11 に答える 11

21 
$("img.lazy").lazyload({
             threshold : 50
         });

そしてこれを追加します：

$(window).load(function(){
     $("html,body").trigger("scroll");
});
于 2013-10-30T16:57:28.953 に答える
4

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

于 2013-01-27T11:36:36.390 に答える
4

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

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>
この例では、URLがクリックされてから1000ミリ秒後にページを100px下にスクロールします。400ms後に1pxスクロールを使用して、見過ごされたりシームレスになったりすることをお勧めします。お役に立てれば。

于 2014-11-18T04:58:34.910 に答える
3

これを試して....

$(function() {
    $("img.lazy").show().lazyload()
    window.onload = function() {
        $(window).resize()
    };
});
于 2012-12-20T12:54:37.890 に答える
3

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

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

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

于 2015-01-14T06:32:10.317 に答える
2

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

于 2013-04-13T13:59:45.967 に答える
0

$.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");
于 2013-05-09T09:42:21.230 に答える
0

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

$('.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');

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

于 2013-07-17T16:28:19.633 に答える
0 
$(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#L130

于 2013-09-19T10:27:58.680 に答える
0

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

于 2013-10-28T10:43:23.367 に答える
0

z-indexで並べ替えられた複数の画像を持つスライダーの場合、lazyloadオプションfailure_limitが便利です。

このオプションの詳細はこちら

于 2015-05-19T09:30:17.060 に答える