Question

目标

为低ram设备创建一个响应式幻灯片。（以高分辨率设置一组许多图像..移动设备会崩溃）。我想只显示一个图像并预加载N个图像。

方案

假设我有77张图片（nI=77，变量）。 Obiovsly我想加载第一张图片，但也希望每面预加载2张图片（nP=2，变量）。这总共有5个盒子（中间，2个左，2个）。nB=nP*2+1。

在初始化时，我想按如下方式显示方框/图像（数字是图像索引）

[75][76][0][1][2]

0，第一张图像是唯一可见的图像。

现在是棘手的部分。

如果按<（下一步），静态可视化为：

[76][0][1][2][3]

但是每一个盒子都会移动！所以如果我们从默认的位置开始：

[75][76][0][1][2]//image index
[ 0][ 1][2][3][4]//box index
[-2][-1][0][1][2]//box position

<

[76][0][1][2][ 3]//image index
[ 1][2][3][4][ 0]//box index
[-2][-1][0][1][2]//box position

按左键将下图加载到第一个框中，将第一个框移动到最后一个位置，每隔一个框移动（一个偏移宽度）到左边。

>

[74][75][76][0][1]//image index
[4][ 0][ 1][2][3]//box index
[-2][-1][0][1][2]//box position

按向右键将前一个图像加载到最后一个框中，将最后一个框移动到第一个位置，每隔一个框移动（一个偏移宽度）到右边。

一些相关的js

var I=ARRAYOFIMAGES,
    nI=images.length,
    nP=2,
    nB=nP*2+1,
    nC=0,
    slideWidth=slide.offsetWidth; // CURRENT IMAGE INDEX 200px variable

function defaultPos(a,b){//[-400, -200, 0, 200, 400] 
 for(a=[],b=0;b<nB;b++){
  a[b]=(b-nP)*slideWidth
 }
 return a
}
function currentInd(a,b){//[75, 76, 0, 1, 2] 
 for(b=[],a=0;a<nB;a++){
  b[a]=(a+nC-nP+nI)%nI
 }
 return b
}
function next(e){
 nC=++nC%nI;
 d=1; // direction 
 calculate()
}
function prev(e){
 nC=(--nC+nI)%nI;
 d=0;
 calculate()
}
function calculate(){
 //for(BOXES){
 // if(ISIMAGE2CHANGE){box[l].style.backgroundImage='url('+I[IMAGEINDEX]+')')}
 // box[l].style.webkitTransform='translate3d('+POSITION+'px'+',0,0)';
 //}
}

部分工作DEMO

第一次演示

http://jsfiddle.net/VfYR4/

新演示（较短但未加载正确的图像）

http://jsfiddle.net/7Nedw/1/

注意：将延迟调整为-webkit-transition:-webkit-transform 1000ms ease 1000ms;以查看正在发生的情况。

问题

数学错了。如果索引为0并且我向后移动，则位置和索引都会混乱。

该函数返回错误的索引以加载，位置和要加载的框。

Answer 1

像这样提供HTML标记

 <img src="" data-src="images/1.jpg" alt="img0"/>
 <img src="" data-src="images/2.jpg" alt="img1"/>
 <img src="" data-src="images/3.jpg" alt="img2"/>
 <img src="" data-src="images/4.jpg" alt="img3"/>

使用此方法，当您按下左或右按钮时：

function preLoadImages() {
        var $image = $(".my-image");
        var $imageUnloaded = $(".my-image[src='']");

        for(var i=current;i<current+4;i++) {    //(current+1) is image index shown to user
            var j = (i+$image.length)%$image.length;
            console.log("Image to be loaded : "+j);
            var $this  = $($image[j]);
            if($this.attr('src') == '') {
                $this.attr('src',$this.data('src'));
            }
        }
    }

如果要更改每侧的预加载图像数，可以稍微更改逻辑。

图像幻灯片计算（位置，索引，...）

1 个答案: