JS实现图片延迟加载

关注

VIP免费原创最新推荐文章于 2026-03-23 00:55:12 发布 3.8k 阅读 AI 写同款· GEO 优化 ›

JS实现图片延迟加载

在一些图片比较多的网站，往往会出现这样的问题：由于页面中的图片资源多，加上网速的不给力，导致页面的图片迟迟加载不出来，或者所有的图都是加载到半张的样子，让人非常不爽，这种情况导致了非常差的用户体验，最终会让用户失去耐心，使得该网站的流量流失，现在我们就来探讨一下如何解决这个问题。

思路：

页面加载的时候，只加载出现在浏览器可视区域的图片，页面下方的图片先不进行加载；
往下滚动页面，下方的图片出现的时候（在本例子中是出现一半以后），对图片资源进行加载。

效果展示：

页面初始化的时候：

页面初始化的时候

可以看到，第二排图片由于还有一半以上没有出现在浏览器可视区域内，所以还没有加载。

后台资源监听

从开发者工具可以看到，此时页面只加载到01-03三张图片资源。

页面往下滚的时候：

这里写图片描述

可以看到，随着页面的往下滚动，页面下方的图片资源陆续被加载出来。

具体的实现：

1、页面结构

图片采用3列布局，共5行，当然，这个布局是可以按自己具体的需求来定。其中图片标签img的src先置为空，并另外设置一个自定义属性x-src，用于暂时存放图片的路径，这样，页面加载的时候，因为src属性为空，所有图片默认都不会加载到图片资源。

<div class="container-fluid div-border" id="img_wraper">

    <div class="row clearfix">
        <div class="col-md-4">
            <a href="#" class="thumbnail img_container">
                <img src="" x-src="img/01.jpg"/>
            </a>
        </div>
        <div class="col-md-4">
            <a href="#" class="thumbnail img_container">
                <img src="" x-src="img/02.jpg"/>
            </a>
        </div>
        <div class="col-md-4">
            <a href="#" class="thumbnail img_container">
                <img src=