未排序列表：按需加载图像或 div答案

【问题标题】：Unsorted list: load images or divs on demand未排序列表：按需加载图像或 div
【发布时间】：2012-04-06 07:40:34
【问题描述】：

我使用 iScroll 制作了一个水平滑块。

我想展示很多图片（或 div），我像这样添加了这些图片：

<ul>
<li style="background: url(fotos/PabloskiMarzo2008.jpg) no-repeat;  background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; -khtml-background-size: 100%;  "></li>
...
<ul>

但是加载每张图片需要很多时间（而不是图片，我将使用图像映射或 div）。

如何按需加载图像？当用户向左滑动时，我想加载下一张图片。

【问题讨论】：

标签： jquery css jquery-mobile slider iscroll4

【解决方案1】：

//setup list of images to lazy-load, also setup variable to store current index in the array
var listOfImages = ['fotos/zero.jpg', 'fotos/one.jpg', 'fotos/infinity.jpg'],
    imageIndex   = 0,
    myScroll     = new iScroll('my-element');

//bind to the swipeleft event on the list
$('ul').bind('swipeleft', function () {

    //append a new list-item to the list, using the `listOfImages` array to get the next source
    //notice the `++` that increments the `imageIndex` variable
    $(this).append($('li', { style : 'background: url(' + listOfImages[imageIndex++] + ') no-repeat;  background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; -khtml-background-size: 100%;' }));

    //since the dimensions of your scroller have changed, you have to let iScroll know
    myScroll.refresh();
});

您不妨将大部分 CSS 放在影响元素的类中，这样您就不必将其内联添加到每个元素中：

JS--

    $(this).append($('li', { style : 'background-image : url(' + listOfImages[imageIndex++] + ')' }));

CSS --

#my-element li {
    background-repeat       : no-repeat;
    background-size         : 100%;
    -moz-background-size    : 100%;
    -o-background-size      : 100%; 
    -webkit-background-size : 100%;
    -khtml-background-size  : 100%;
}

【讨论】：

非常感谢您的回答。我还有一个问题：如果我使用的是带有地图的图像。我怎样才能做到这一点？或者不是图像，如果我使用
，我该怎么做？
也许与：stackoverflow.com/questions/1145208/…