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

在此页面中，用户一次查看1张图像。右：下一张图片。左图：上一张图片。我试图总是缓冲下20个图像。一次一个。但我一直在失败。如何一个接一个地缓存图像？ [在任何给定时间仅加载1个图像]

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

我想要它到缓冲区下一个图像在任何给定的时间。由于Internet连接不良，我不希望它同时缓冲多个图像。

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

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

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

任何帮助表示赞赏。谢谢！

来源

2016-02-26 user3722246

你在每次调用'setInterval'功能复位'allLoaded'到TRUE;。 _“我可以提供整个HTML文件，如果你需要的话”_是的，你可以在问题中包含'html'吗？ – guest271314

你不明白为什么吗？我应该添加所有的HTML吗？在请求缓存新图像之前，要确保将以前缓存的图像完全加载。 – user3722246

如果你想缓冲图像加载你不希望在src'设置在HTML – charlietfl

您的问题的简单答案是使用图像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();};

来源

2016-02-26 18:47:48 OffTheBricks

我收到了大约100个答案，至今我的问题是你的第一个有用的答案。谢谢。我用你给我的想法解决了我的问题。 – user3722246

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

回答

相关问题