是否可以在渲染之前加载整个网页？答案

【问题标题】：Is it possible to load an entire web page before rendering it?是否可以在渲染之前加载整个网页？
【发布时间】：2010-10-09 05:50:15
【问题描述】：

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

【问题讨论】：

标签： html ajax

【解决方案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();
});

无需担心不同的浏览器——完整的跨浏览器兼容性。

【讨论】：

图像是从外部源定期生成的，所以我在代码时没有文件名。
你可以让它们在生成时命名相同的东西吗？ IE：图像将始终被称为 homepagetemp.jpg 因为那么您可以使用 jQuery 的 ajax 加载功能每隔几秒或您需要的任何时间间隔获取新图像。

【解决方案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>

这很复杂，但我将把它作为练习留给读者，让他们将所有部分放在一起（并希望说“啊哈！”）:-)

【讨论】：

说这是你的html

这是你需要的 jQuery： $('d

【解决方案3】：

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

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

【讨论】：

如果图像是高质量的照片...动画 GIF 可能有点臃肿。如果是这种情况，请尝试 Max Frasers 的建议。

【解决方案4】：

回到黑暗的过去（2002 年），我通过一个不可见的 iframe 来处理这种情况。我会将内容加载到其中，然后在 body.onload() 方法中将内容放在需要去的地方。

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

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

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

【讨论】：