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

Question

我有一个网页,每隔几秒自动重新加载一次,并显示不同的随机图像.但是,当它重新加载时,会有一秒钟的空白页面,然后图像会慢慢加载.我想继续显示原始页面,直到下一页加载到浏览器的内存中,然后一次显示所有内容,使其看起来像一个无缝的幻灯片.有没有办法做到这一点？

Answer 1

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

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

如果您使用jQuery,这是JS所需的 -

说这是你的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 2

如果您只是更改图像,那么我建议您根本不重新加载页面,并使用一些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>

这很复杂,但我会把它作为练习留给读者将所有部分放在一起(并希望说"AHA!"):-)