0

我正在使用 jQuery 工具创建一个运行良好的可滚动产品框。

但是，我想通过 AJAX 加载图像......我已经查看了延迟加载，但无法让它适用于水平 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

您可以根据需要将图像从 JSON 加载到itemsdiv（即基于下一个/上一个单击）。

代码如下

<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 回答