イメージがサイズ変更された後のイメージの遅延読み込みのトリガー

Question

私は一度に数百のイメージを表示するページに取り組んでいます。私はLazy Load pluginを使用してページをすばやく読み込むことができます。すべてが完全に機能していますが、ユーザーがハンドルをドラッグして画像を拡大/縮小できるようにするためにjQuery UI Sliderを追加しました。ユーザーが画像を縮小すると、以前は折り目の下にあった画像が可視領域に移動した可能性があります。スクロールが発生していないので、イメージはロードされません。

サイズ変更ハンドルをドラッグしても、表示可能な領域に入力されたものだけでなく、すべての画像がロードされているときに、トリガーをロードするイベントを追加しました。

コードは非常に簡単です：ここでは

は、プラグインを配線するためのコードです。

$("#pplImages.lazy").lazyload({event : "LoadVisibleImages"}); 

function LoadVisibleImages() { 
    $("#pplImages.lazy").trigger("LoadVisibleImages"); 
} 

そして、ここでスライダー

$("#slider").slider({ 
    min: 25, 
    max: 125, 
    value: 100, 
    slide: function(event, ui) { 
    ResizeImages(ui.value); 
} 
}).slider().bind({ 
    slidestop : function(event,ui) {LoadVisibleImages();} 
}); 

から読み込みをトリガーするコードは、私が探しているものだけになりまし表示可能な画像ではなく上のすべての画像をロードする方法ですページ。

誰かが間違っているのを見ることはできますか？

Answer 1

これはプラグインに問題がある可能性があります。現代のブラウザでは機能していないこのプラグインに関するインターウェブに関する議論がたくさんあります。

JavaScript Asynchronous Image Loader (JAIL)をご覧ください。作者はこの問題への直接の応答としてそれを書いた：Reasons why I wrote the plugin Jquery Asynchronous Image Loader (JAIL)。

This exampleは、画像読み込みをトリガする。おそらく同じようにコードを変更することができます。

これを試してみてください：

1. あなたResizeImagesがあなたの怠惰な負荷を変更トリガDOMオブジェクト
2. のクリックをシミュレートする機能を設定し、ID「トリガー」
3. であなたのページに隠されたdiv要素を追加します。 JAILプラグインを使用し、トリガーオブジェクトがクリックされるたびに画像をロードするように設定するコード。

あなたのコードは次のようなものを見ることができます：

はJavaScript

$("#pplImages.lazy").jail({ 
    selector:'#trigger', 
    event: 'click' 
}); 

$("#slider").slider({ 
    min: 25, 
    max: 125, 
    value: 100, 
    slide: function(event, ui) { 
    ResizeImages(ui.value); 
} 
}).slider().bind({ 
    slidestop : function(event,ui) { 
     $('#trigger').click(); //Notice this simulated click event 
    } 
}); 

HTML（ちょうどあなたのページにこれを追加）

<div id="trigger" class="hidden"></div> 

あなたは持っていますこの仕事を完璧にするために周りを見回すあなたは上記を踏まなければならない。