如何使用外部预加载器预加载网页？ [英] How to preload a web page using external preloader?

问题描述

我有一个简单的HTML页面，它有一个大图像作为全屏幕背景;我把这个页面称为 index2.html 。

我想创建另一个名为的页面.html 将完全预加载 index2.html ，然后将用户定向到它。但是，我在互联网上找到的所有预加载器解决方案都基于单个HTML页面。

我如何实现这一目标？任何帮助，将不胜感激。

解决方案

您可以通过将浏览器加载到 index.html 作为1像素图像

 < img src =/ index2-background- image.jpgalt =width =1height =1/> 
  

或者你可以从 index2.html加载内容使用jQuery，如下所示：

 < script src =// ajax.googleapis.com/ajax/libs/jquery /1.9.1/jquery.min.js\"></script> 
< script type =text / javascript> 
 jQuery（）。ready（function（）{
 $ .get（'index2.html'，function（data）{
 jQuery（＃index2content）。html（data）; 
}）; 
}）; 
< / script> 
 
< div id =index2content>< / div> 
  

I have a simple HTML page that has a large image as a full screen background; I called this page index2.html.

I want to create another page called index.html which will preload index2.html fully, and then direct the user to it. However, all the preloader solutions that I've found on internet are based on a single HTML page.

How can I accomplish this? Any help would be appreciated.

解决方案

You can cause the browser to cache the image by loading it on index.html as a 1 pixel image

<img src="/index2-background-image.jpg" alt="" width="1" height="1" />

Alternatively you could load the content from index2.html using jQuery like so:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery().ready(function () {
    $.get('index2.html', function(data) {
        jQuery("#index2content").html(data);
    });
});
</script>

<div id="index2content"></div>

这篇关于如何使用外部预加载器预加载网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！