利用JavaScript、Ajax及CSS3实现图片预加载

来源：互联网发布：淘宝的芋圆能吃吗编辑：程序博客网时间：2024/04/30 06:47

导语

多图片网页很多都用了预加载图像，预加载图像是改善用户体验的好方法。但苦于网上找好资料不容易，特地翻墙研究了两篇，一起参考学习

仅使用JavaScript实现预加载

像以前的方法一样有效，我通常认为实际上实在太乏味和耗时。相反，我通常更喜欢使用直线切片JavaScript来预加载图像。以下是几种仅限JavaScript的预加载方法，可在几乎每个现代浏览器中精美地工作。
JavaScript方法1
不引人注意，优雅地降级，易于实现，只需编辑/添加图像路径/名称，无需其他编辑：

<div class="hidden">    <script type="text/javascript">        <!--//--><![CDATA[//><!--            var images = new Array()            function preload() {                for (i = 0; i < preload.arguments.length; i++) {                    images[i] = new Image()                    images[i].src = preload.arguments[i]                }            }            preload(                "http://domain.tld/gallery/image-001.jpg",                "http://domain.tld/gallery/image-002.jpg",                "http://domain.tld/gallery/image-003.jpg"            )        //--><!]]>    </script></div>

该方法对于预加载大量图像特别方便。在我的一个画廊网站上，我使用这种技术来预加载近50张图像。通过将此脚本包含在登录页面以及内部金额页面上，大多数图库图像都将在用户输入登录凭据之前预先加载。很不错。

JavaScript方法2

这是另一个类似的方法，它使用不引人注目的JavaScript来预加载任何数量的图像。只需将以下脚本包含在您的任何网页中，然后根据以下说明进行编辑：

<div class="hidden">    <script type="text/javascript">        <!--//--><![CDATA[//><!--        if (document.images) {                img1 = new Image();                img2 = new Image();                img3 = new Image();                img1.src = "http://domain.tld/path/to/image-001.gif";                img2.src = "http://domain.tld/path/to/image-002.gif";                img3.src = "http://domain.tld/path/to/image-003.gif";            }        //--><!]]>    </script></div>

正如你所看到的，每个预加载的图像需要一个变量定义，“img1 = new Image（）;”，以及源声明“img3.src =”../path/to/image-003.gif“; “。通过复制图案，您可以根据需要预先加载多张图像。

我们甚至可以通过延迟预加载直到页面加载之后改进此方法。为此，我们只需将脚本包装在一个函数中，并使用addLoadEvent（）来使其工作：

function preloader() {    if (document.images) {        var img1 = new Image();        var img2 = new Image();        var img3 = new Image();        img1.src = "http://domain.tld/path/to/image-001.gif";        img2.src = "http://domain.tld/path/to/image-002.gif";        img3.src = "http://domain.tld/path/to/image-003.gif";    }}function addLoadEvent(func) {    var oldonload = window.onload;    if (typeof window.onload != 'function') {        window.onload = func;    } else {        window.onload = function() {            if (oldonload) {                oldonload();            }            func();        }    }}addLoadEvent(preloader);

使用Ajax实现预加载

好像所有这些都不够酷，这里是使用Ajax预加载图像的一种方法。这种方法是在极客和字母处发现的，并且使用DOM来预加载图像，但CSS，JavaScript和其他任何东西。使用Ajax优于直接JavaScript的主要优点是可以预先加载JavaScript和CSS文件，而不影响当前页面。对于图像，这不是一个真正的问题，但该方法是干净和有效的。

window.onload = function() {    setTimeout(function() {        // XHR to request a JS and a CSS        var xhr = new XMLHttpRequest();        xhr.open('GET', 'http://domain.tld/preload.js');        xhr.send('');        xhr = new XMLHttpRequest();        xhr.open('GET', 'http://domain.tld/preload.css');        xhr.send('');        // preload image        new Image().src = "http://domain.tld/preload.png";    }, 1000);};

就这样，这段代码将预装三个文件：“preload.js”，“preload.css”和“preload.png”。还设置了1000ms的超时时间，以防止脚本挂起并导致正常页面功能的问题。

为了包装起来，我们来看看这个预加载会话如何用纯JavaScript语言编写：

window.onload = function() {    setTimeout(function() {        // reference to <head>        var head = document.getElementsByTagName('head')[0];        // a new CSS        var css = document.createElement('link');        css.type = "text/css";        css.rel  = "stylesheet";        css.href = "http://domain.tld/preload.css";        // a new JS        var js  = document.createElement("script");        js.type = "text/javascript";        js.src  = "http://domain.tld/preload.js";        // preload JS and CSS        head.appendChild(css);        head.appendChild(js);        // preload image        new Image().src = "http://domain.tld/preload.png";    }, 1000);};

在这里，我们通过DOM创建三个元素来加载我们的三个文件。如原始文章所述，在预加载的文件内容不应用于加载页面的情况下，此方法不如Ajax方法。

CSS3实现图片预加载

使用纯CSS3预览图像的更好的方式打击我:

.preload-images {    background: url(image-01.png) no-repeat -9999px -9999px;    background: url(image-01.png) no-repeat -9999px -9999px,            url(image-02.png) no-repeat -9999px -9999px,            url(image-03.png) no-repeat -9999px -9999px,            url(image-04.png) no-repeat -9999px -9999px,            url(image-05.png) no-repeat -9999px -9999px;    }

使用CSS3对多个背景图像的新支持，我们可以使用单个现有元素来预加载所有所需的图像。将此方法与使用CSS预先加载图像的旧方法进行比较：

.preload-01 { background: url(image-01.png) no-repeat -9999px -9999px; }  .preload-02 { background: url(image-02.png) no-repeat -9999px -9999px; }  .preload-03 { background: url(image-03.png) no-repeat -9999px -9999px; }.preload-04 { background: url(image-04.png) no-repeat -9999px -9999px; }.preload-05 { background: url(image-05.png) no-repeat -9999px -9999px; }

您可以看到，CSS3方法是使用单个CSS选择器预先加载图像的更为清洁的方法。请注意，我们还需要确保在preload元素中不显示背景图像。为此，我想我们可以使用display：none隐藏元素，或者使用-9999px定位将图像远离屏幕。

0 0