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

How to buffer images one after another? [only 1 image loads at any given time]

本文关键字：图像 任何 定时间 加载 何一个 一个 缓冲      更新时间：2023-09-26

在此页面中，用户一次查看 1 张图片。右：下一张图片。左：上图。我正在尝试始终缓冲接下来的 20 张图像。一次一个。但我一直在失败。

以下代码在任何给定时间开始缓冲接下来的 20 个图像。

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

所以我试图获取"如果要缓冲的最新图像"完成加载的信息。以下代码应该已经工作。但事实并非如此。它"同时开始缓冲接下来的 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 张图像完全缓冲。

我是一个菜鸟，但我在这个问题上花了几个小时尝试了很多方法，但都失败了。我怎样才能实现我的目标？

任何帮助，不胜感激。谢谢！

问题的简单答案是使用映像加载事件来触发下一个映像的下载。开始使用 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();};
相关文章：