Несортированный список: загрузка изображений или делений по требованию - PullRequest
Новая
       35

Несортированный список: загрузка изображений или делений по требованию

1 голос
/ 21 марта 2012

Я сделал горизонтальный слайдер, используя 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>

Но загрузка каждого изображения занимает много времени (вместо изображений я собираюсь использовать изображения map или div).

Как я могу загружать изображения по запросу? Когда пользователь проведет пальцем влево, я хочу загрузить следующее изображение.

1 Ответ

1 голос
/ 21 марта 2012 
//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%;
}
...