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