如何预载图像

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

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'; 
    }

那么怎样才能减少我的图片加载时间（不使用大精灵）？

来源

2014-03-05 André

你需要为每个图像

// 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创建实例被覆盖的图像有机会先加载。

要立即显示您的图片先装后，你可以在不同的页面上运行此脚本，等到每个图像

来源

2014-03-05 11:38:25

谢谢。图像现在加载到FF（我可以看到在Firebug中），但当我第一次显示图像时（在清理缓存之后），我仍然注意到延迟。有什么需要做的吗？它虽然在Opera上运行良好。 –

我可以看到问题：当我运行JS代码时，请求实际上是由Firefox发送的，但是当我想要第一次显示图像时，Firefox再次发送请求。然后，它看起来像图像实际上被缓存。 –

@André查看我的更新回答 –

尝试的visibility:hidden;代替display:none;

来源

2014-03-05 11:38:33 Mischa

感谢您的回复。这与我上面编写的代码相同，并有一个可见的临时图像。 –

我找到了解决方案，这要归功于扬Turoň的回答。这里是我的代码：

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'; 
    }

来源

2014-03-05 13:28:39

如何预载图像

回答

相关问题