图片的预载入(Preload)与延迟载入(Lazyload)

最新推荐文章于 2025-06-28 10:55:11 发布

原创最新推荐文章于 2025-06-28 10:55:11 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文探讨了图片预载入(Preload)和延迟载入(lazyload)技术，旨在优化网页加载速度和用户体验。预载入通过Image对象、CSS背景图片和img标签等方式预先载入图片，提高响应速度。延迟载入则适用于图片密集型页面，仅在用户滚动时载入当前屏幕内的图片，减少初次加载时间。推荐使用Lazy Load jQuery插件实现延迟载入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片相对于HTML，CSS，JavaScript来说都是比较大的，因此图片经常会影响到网页的加载速度，影响用户体验。如果图片过多，则浏览器则需要花大量的时间才能把所有的图片载入完毕，而对于图片信息非常重要的页面，用户不得不等待图片完全载入了才能浏览页面。因此就有人想出了预载入图片技术来提高响应速度以及延迟载入技术来解决图片过多问题。

预载入图片(Preload)

预载入图片主要是为了响应速度问题，比如点击下一页时能快速显示图片，因为如果在点击时才去载入图片是很慢的。其原理就是在第一个页面时就把后面可能用到的图片先载入到浏览器里来，因此缓存的关系，后面用到该图片时并不需要从新下载。下面就是常用的几种方法：

Image对象载入

这种方式主要使用Image对象来实现的。document.imags数组的成员都是一个个Image对象。创建一个Image对象后给它的src属性赋值，这时浏览器就会去请求这张图片并缓存起来，但是该Image对象并没有加到dom中去，因此该图片并不会显示出来。


        var image = new Image();
        image.src = 'logo.jpg';

CSS背景图片

它的原理就是利用背景图片的方式要求浏览器去提前载入图片，同时把这些背景图片隐藏起来不让显示，个人觉得这种方法稍微麻烦了一些，不是很经常使用。


        #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
        #preload-02 { back// better image preloading @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
        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);ground: 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; }