0

jQuery ツールを使用して、非常にうまく機能するスクロール可能な製品ボックスを作成しています。

ただし、AJAX を介して画像をロードしたいと思います... Lazy load を見てきましたが、水平 div では機能しません。表示されているものだけでなく、div 内のすべての画像をロードします。

私はこれを使用しています: http://jquerytools.org/demos/scrollable/index.html

ベールと呼ばれるいくつかのコードを見つけました - http://luis-almeida.github.com/unveil/これは素晴らしい軽量コードですが、スクロール可能に合わせてコードを変更する方法がわかりません。

基本的にはリクエストされた時だけ非表示のdivをロードしたい...

誰かが私に何か指針を持っていますか？

編集：

JSFiddle の例- マークされた div をロードする必要がある

 <!-- 5-10 --> &  <!-- 10-15 -->

すべてをプリロードするのではなく、右矢印をクリックしたとき。私の店では、スクローラーに何百もの画像が存在する可能性があるため、問題が発生します!

4

1 に答える 1

1

items必要に応じて（つまり、次/前のクリックに基づいて）JSON から div に画像をロードできます。

このためのコードを以下に示します

<div id='items'>
</div>

var imagesJSON = ["http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg",
                  "http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg",
                  "http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg",
                  "http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg",
                  "http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg",
                  "http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg",
                  "http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg",
                  "http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg",
                  "http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg",
                  "http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg",
                  "http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg",
                  "http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg"];

var currImages = 0;

$(function() {
    currImages = 0;
    LoopThroughImages();

    // initialize scrollable
    $(".scrollable").scrollable();
    $('.next').click(function() {
        // Load next 4 images using ajax.
        //i am loading images from the array
        LoadNextImagesAjax();
    });
});

function LoopThroughImages() {
    var i = 0;
    var currDiv = null;

    for (var i = 0; i < 8; i++) {
        if(imagesJSON.length < currImages + i)
        {
            currImages+=i;
            return;
        }
        if (i % 4 == 0) {
            currDiv = $('<div></div>');
            $(".items").append(currDiv);
        }
        currDiv.append('<img src="' + imagesJSON[i] + '" />');
    }

    currImages+=8;
}

function LoadNextImagesAjax() {
    for (var i = 0; i < 4; i++) {
        if(imagesJSON.length <= currImages + i)
        {
            currImages+=i;
            return;
        }
        if (i % 4 == 0) {
            currDiv = $('<div></div>');
            $(".items").append(currDiv);
        }
        currDiv.append('<img src="' + imagesJSON[currImages + i] + '" />');
    }

    currImages+=4;
}

スクロール可能な製品ボックスを作成するには、http://jquerytools.org/demos/scrollable/index.htmlを使用できます。

ここで JSFiddle のデモを見つけることができます。このコードをテストするには、有効な画像パスを指定する必要があります。

于 2013-01-01T13:40:12.767 に答える