Question

在此页面中，用户一次查看1张图像。右：下一张图片。左：上一张图片。我试图总是缓冲下20个图像。一次一个。但我一直都在失败。

以下代码在任何给定时间开始缓冲下20张图像。

我希望在任何给定时间缓冲下一张图片。由于互联网连接不良，我不希望它同时缓冲多个图像。

所以我试图获取“如果要缓冲的最新图像”完成加载的信息。以下代码应该有效。但事实并非如此。它“开始同时缓冲下20个图像”。（为了得到我的观点，假设300毫秒是0）

（如果你需要，我可以提供整个HTML文件，但它非常简单，因此在我看来并不是那么需要）因为现在我只把部分放在我管理缓冲的地方。可能存在一些不相关的错误，因为我一直在修改它，但与此问题相关的逻辑应该没问题。

setInterval(function(){ 
    var allLoaded = true;
    for(var i=index; i<indexToLoad; i++){
        $("#image"+i).onload = function() {
            console.log("i am a noob");
        }

        $("#image"+i).onerror = function() {
            console.log("be nice");
            allLoaded == false;
        }
    }

    if(allLoaded == true){
        if(indexToLoad-index < 20)
            indexToLoad++;
    }

    var imageId = "image"+indexToLoad;

    if($("#" + imageId).length == 0) {
        $('<img />').attr({src: links[indexToLoad], id: imageId}).appendTo('body').css('display','none');
        //console.log("request" );
    }

}, 300);

这里的互联网连接非常薄弱。所以我试图一次只缓冲1个图像。但是当图像加载完毕后，我想让它缓冲数组中的下一个图像。直到接下来的20张图片被完全缓冲。

我是一个菜鸟，但我花了几个小时来解决这个问题尝试了许多方法并且失败了。我怎样才能实现目标？

感谢任何帮助。谢谢！

Answer 1

您的问题的简单答案是使用image onload事件来触发下一个图像的下载。使用window.onload事件开始缓冲图像。

var imgIndex = 0;
var imgIndexToLoad = 20;
var links = new Array();    //your src array

function BufferImage(){
    if(imgIndex > imgIndexToLoad){
        return;
    }
    imgIndex++;
    var newImg = new Image();
    newImg.onload = function(){
        document.body.appendChild(this);
        BufferImage();
    };
    newImg.id = imgIndex;
    newImg.src = links[imgIndex-1]; 
}
window.onload = function(){BufferImage();};

如何一个接一个地缓冲图像？ [在任何给定时间仅加载1个图像]

1 个答案: