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！”）： - ）

Answer 3

如果您在图像区域中创建两个重叠的div，则可以通过AJAX加载一个带有新图像的div，隐藏当前div并显示带有新图像的div，并且您将无法刷新网页一个“糟糕的过渡”。然后重复这个过程。

如果只有少量图像并且它们始终以相同的顺序显示，您只需创建一个动画GIF即可。

Answer 4

回到过去的黑暗时代（2002年），我通过拥有一个看不见的iframe来处理这种情况。我将内容加载到body.onload（）方法中，然后将内容放在需要的位置。

Pre-AJAX是一个非常好的解决方案。

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

话虽如此，在您只是简单地循环图像的情况下，使用Ajax或jQuery循环插件之类的东西来动态循环显示图像，而无需重新加载整个页面。

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

4 个答案: