本文介绍了未排序列表:按需加载图像或 div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用 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>但是加载每张图片需要很多时间(而不是图片,我将使用图像映射或 div).
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
发布评论