jq实现图片懒加载

最新推荐文章于 2021-07-09 11:05:59 发布

Ariel_ckr

最新推荐文章于 2021-07-09 11:05:59 发布

阅读量1.4k

点赞数

分类专栏： html+css+js+框架文章标签： jq懒加载

本文链接：https://blog.csdn.net/Ariel_201311/article/details/86251697

版权

本文详细介绍了如何利用jQuery库实现图片的懒加载效果，通过监听滚动事件，当图片进入视口时再进行加载，有效提高网页加载速度并节省流量。教程包括核心代码解析和实际应用示例。

摘要由CSDN通过智能技术生成

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>懒加载实例</title>
        <style type="text/css">
        /*一定要有预先高度*/
            img{
    
                width: 600px;
                height: 260px;
            }
        </style>
    </head>

    <body>
        <div>
            <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" data-src="http://yangege.b0.upaiyun.com/11de79502d0af.jpg!v1sell" alt="" />
        </div>
        <div>
            <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" data-src="http://yangege.b0.upaiyun.com/33f99f823ed3d.jpg!v1sell" alt="" />
        </div>
        <div>