未排序列表：根据需要加载图像或div [英] Unsorted list: load images or divs on demand

问题描述

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

I made a horizontal slider using iScroll.

我想显示很多图片（或div），我添加了这样的图片：

I want to show a lot of images (or divs), and I added those images like this:

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

但是它获得了很多时间来加载每个图像（而不是我要使用的图像image map或divs）。

But it gets a lot of time to load every image (instead of images I'm going to use images map or divs).

如何根据需要加载图片？当用户向左滑动时，我要加载下一张图片。

How can I do that load images on demand? When user swipes to left, I want to load the next image.

推荐答案

//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的大部分放在影响元素的类中，必须将其内联添加到每个元素：

You might as well put most of that CSS in a class that affects the elements so you don't have to add it inline to each element:

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%;
}

这篇关于未排序列表：根据需要加载图像或div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！