Question

我正在使用jQuery Tools来创建一个可以很好地工作的可滚动产品盒。

但是，我想通过AJAX加载图像...我已经看过Lazy加载但无法让它适用于水平div - 它加载div中的所有图像而不仅仅是可见的图像。

我使用的是：http://jquerytools.org/demos/scrollable/index.html

我找到了一些名为unveil的代码 - http://luis-almeida.github.com/unveil/这是一个很好的轻量级代码，但我无法弄清楚如何更改代码以适应可滚动的代码。

基本上我只想在请求时加载隐藏的div ...

有人对我有任何指示吗？

修改

JSFiddle example - 需要加载标记为

的div

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

单击右箭头而不是预先加载所有内容。在我的商店里，卷轴上可能有数百张图片，因此出现了问题！

Answer 1

您可以根据需要将图像从JSON加载到items 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 demo here。您必须提供有效的图像路径来测试此代码。

在jQuery Tools Scrollable中使用AJAX加载图像

1 个答案: