Question

我正在尝试在我的网页上预加载图片。我已经看过很多关于它的讨论，其中大多数都建议创建一个 Image 对象，然后编辑 src 属性。但是，这不适用于最新版本的Chrome和Firefox。该请求被标记为“待定”，直到图像实际显示在页面上，然后我可以注意到在显示图像之前有一点延迟。在图像显示之前，即使在页面上创建实际的 img 标签（使用display：none）也不起作用。最后，当我尝试下面的代码时，实际上只加载了循环的最后一个图像

var img = document.getElementById('some_visible_image');
for(var i=1;i<5;i++)
    for(var j=1;j<3;j++){
        img.src = 'images/'+i+'_'+j+'_green.png';
        img.src = 'images/'+i+'_'+j+'_orange.png';
        img.src = 'images/'+i+'_'+j+'_red.png';
    }

那么如何减少图像的加载时间（不使用大精灵）？

Answer 1

您需要为每个图像创建实例

// redirect after all the images are preloaded
function redirect() {
  location.href = "yourtargetpage.html";
}

// should solve the first-time-load problem
var loads = 0;
function loaded() {
  // the total number of images needed to load
  if(++loads==42) redirect();
}

// if all the images aren't loaded in 3 seconds, don't wait further
setTimeout(redirect, 3000);

for(var i=1;i<5;i++)
for(var j=1;j<3;j++){
  var img = new Image();
  img.src = 'images/'+i+'_'+j+'_green.png';
  if(img.complete) loaded(); // if cached, onload isn't fired sometimes
  else img.onload = loaded; // fires for the first time the page loads
}

或在图像有机会加载之前覆盖src。

要在第一次加载后立即显示图像，您可以在其他页面上运行此脚本，等到每个图像

Answer 2

由于JanTotoň的回答，我找到了解决方案。这是我的代码：

for(var i=1;i<=5;i++)
    for(var j=1;j<=3;j++){
        var img = new Image();
        img.src = 'images/'+i+'_'+j+'_green.png';
        var img = new Image();
        img.src = 'images/'+i+'_'+j+'_orange.png';
        var img = new Image();
        img.src = 'images/'+i+'_'+j+'_red.png';
        var img = new Image();
        img.src = 'images/'+i+'_'+j+'_grey.png';
    }

Answer 3

尝试使用visibility:hidden;代替display:none;

如何预加载图像

3 个答案: