5

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

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

コードは非常に簡単です。

プラグインを接続するコードは次のとおりです。

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

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

そして、ここに Slider からの読み込みをトリガーするコードがあります

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

私が探しているのは、ページ上のすべての画像ではなく、現在表示可能な画像のみをロードする方法です。

誰かが私が間違っていることを見ることができますか?

4

1 に答える 1

1

これは、プラグインの問題である可能性があります。このプラグインが最新のブラウザーで機能しないことについて、インターウェブ上で多くの議論があります。

JavaScript Asynchronous Image Loader (JAIL)を見てください。著者は、この問題への直接的な回答としてそれを書きました:プラグイン Jquery Asynchronous Image Loader (JAIL) を書いた理由。

この例は、画像の読み込みをトリガーする li を示しています。おそらくコードを変更して同じことを行うことができます。

これを試してください：

  1. ID「トリガー」で隠しdivをページに追加します
  2. ResizeImages 関数を設定して、トリガー DOM オブジェクトのクリックをシミュレートします。
  3. 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>

これを完全に機能させるにはいじくり回す必要がありますが、上記で始めることができます。

于 2012-04-10T15:16:56.193 に答える