网站内容及实现方式(预加载图片是提高用户体验的一个很好方法。)

　　网站内容及实现方式(预加载图片是提高用户体验的一个很好方法。)

　　预加载图像是改善用户体验的好方法。图片预加载到浏览器中，访问者可以在您的网站上流畅浏览，享受极快的加载速度。

　　这对于图片库和占图片比例很大的网站来说是非常有利的。它确保了图片的快速无缝发布，也帮助用户在浏览您的 网站 内容用户体验时获得更好的结果。本文将分享三种不同的预加载技术，以增强 网站 的性能和可用性。

　　方法一：使用css和JavaScript实现预加载

　　实现图片预加载的方式有很多种，包括使用css、JavaScript，以及两者的各种组合。这些技术可以根据不同的设计场景设计相应的解决方案，非常高效。

　　只需使用 CSS 即可轻松高效地预加载图像。代码如下：

　　#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }  

#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }  

#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

　　将这三个 ID 选择器应用于 (X)html 元素，我们可以通过 CSS 的 background 属性将图像预加载到离屏背景上。

　　只要这些图片的路径保持不变，当它们在网页的其他地方被调用时，浏览器在渲染过程中就会使用预加载（缓存）的图片。简单高效，无需任何 JavaScript。

　　这种方法虽然有效，但仍有改进的余地。使用此方法加载的图像将与页面上的其他内容一起加载，从而增加页面的整体加载时间。

　　为了解决这个问题，我们添加了一些 JavaScript 代码，将预加载时间推迟到页面加载完成。代码显示如下：

　　function preloader() {  

    if (document.getElementById) {  

        document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";  

        document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";  

        document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";  

    }  

}  

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);

　　在脚本的第一部分，我们获取使用类选择器的元素并为其设置背景属性以预加载不同的图像。

　　在脚本的第二部分，我们使用 addLoadEvent() 函数来延迟 preloader() 函数的加载时间，直到页面加载完毕。

　　如果 JavaScript 不能在用户的浏览器中正常运行，会发生什么情况？很简单，图片不会被预加载，页面调用图片时，就可以正常显示了。

　　方法二：只用JavaScript实现预加载

　　上述方法有时确实非常有效，但我们逐渐发现在实际实施过程中会花费太多时间。相反，我更喜欢使用纯 JavaScript 来预加载图像。

　　下面提供了两种这样的预加载方法，它们可以在所有现代浏览器上完美运行。

　　JavaScript 代码片段 1

　　只需编辑加载你需要的图片的路径和名称，实现起来很简单：

<p>  

           var images = new Array()  

            function preload() {  

                for (i = 0; i