是否可以在呈现之前加载整个网页？

Question

我有一个网页每隔几秒自动重新加载一次，并显示一个不同的随机图像。然而，当它重新加载时，第二秒会出现空白页面，然后图像缓慢加载。我希望继续显示原始页面，直到下一页加载到浏览器的内存中，然后一次显示它，以便它看起来像无缝幻灯片。有没有办法做到这一点？

Answer 1

回到黑暗的旧时代（2002年），我通过一个隐形的iframe来处理这种情况。我会将内容加载到body.onload（）方法中，然后将内容放到需要的地方。

Pre-AJAX这是一个很好的解决方案。

我只是提到了完整性。我不推荐它，但值得注意的是，Ajax不是先决条件。

这就是说，在你只需循环图像的情况下，使用Ajax或类似jQuery循环插件的动态循环浏览图像，而无需重新加载整个页面。

Answer 2

是改变图像的唯一的东西？如果是这样的话，使用类似jQuery的循环插件而不是重新加载整个页面可能更有效。

http://malsup.com/jquery/cycle/

这里是JS需要，如果你使用jQuery的 -

说，这是你的HTML：

<div class="pics"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div> 

这里将是需要jQuery的：

$(function(){ 
$('div.pics').cycle(); 
}); 

无需担心不同的浏览器 - 完成跨浏览器兼容吴春明。

Answer 3

如果您创建了两个在图像区域重叠的div，您可以通过AJAX加载一个带有新图像的div，隐藏当前div并显示新图像，并且不会刷新网页导致“不良转型”。然后重复这个过程。

如果只有少量的图像，并且它们总是以相同的顺序显示，那么您可以简单地创建一个动画GIF。

Answer 4

如果你只是改变图像，那么我建议不要重新加载页面，并使用一些JavaScript来改变图像。这可能是jquery循环插件为你做的。

无论如何，这里有一个简单的例子

<img id="myImage" src="http://someserver/1.jpg" /> 

<script language="javascript"> 
var imageList = ["2.jpg", "3.jpg", "4.jpg"]; 
var listIndex = 0; 

function changeImage(){ 
    document.getElementById('myImage').src = imageList[listIndex++]; 
    if(listIndex > imageList.length) 
     listIndex = 0; // cycle around again. 

    setTimeout(changeImage, 5000); 
}; 

setTimeout(changeImage, 5000); 
</script> 

这会改变每5秒的图像源。不幸的是，浏览器会逐步下载图像，因此在下载新图像时，您会收到几秒钟的“闪烁”（或者可能是空白区域）。

为了解决这个问题，您可以“预加载”图像。这是通过创建一个不显示在屏幕上的新临时图像来完成的。一旦图像加载完毕，您将真实图像设置为与“预加载”相同的来源，因此浏览器会将图像从其缓存中取出，并立即显示。你会做这样的：

<img id="myImage" src="http://someserver/1.jpg" /> 

<script language="javascript"> 
var imageList = ["2.jpg", "3.jpg", "4.jpg"]; 
var listIndex = 0; 
var preloadImage = new Image(); 

// when the fake image finishes loading, change the real image 
function changeImage(){ 
    document.getElementById('myImage').src = preloadImage.src; 
    setTimeout(preChangeImage, 5000); 
}; 
preloadImage.onload = changeImage; 

function preChangeImage(){ 
    // tell our fake image to change it's source 
    preloadImage.src = imageList[listIndex++]; 
    if(listIndex > imageList.length) 
     listIndex = 0; // cycle around again. 
}; 

setTimeout(preChangeImage, 5000); 
</script> 

这是相当复杂的，但我会离开它作为一个练习，读者把所有的拼在一起（希望说：“啊哈！”）:-)