jq插件，图片或者视频懒加载

最新推荐文章于 2023-08-13 16:34:46 发布

qaakd

最新推荐文章于 2023-08-13 16:34:46 发布

阅读量1.1k

点赞数

分类专栏： HTML5 js jq

本文链接：https://blog.csdn.net/qaakd/article/details/105053263

版权

js 同时被 3 个专栏收录

83 篇文章 0 订阅

订阅专栏

HTML5

22 篇文章 0 订阅

订阅专栏

12 篇文章 1 订阅

订阅专栏

直接上代码（代码复制即可，插件可以自行百度下载或者在我这里下载）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jq图片视频懒加载</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width" />
</head>

<body>
<section class="container">
    <div class="content-wrap">
        <div id="container">
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://www.baidu.com/img/bd_logo1.png?where=super" width="765" height="574" alt="BMW M1 Hood">
            <br/>
            <img class="lazy img-responsive" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584965560898&di=2745355a556f65761ff857536cb535cc&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F68%2F61%2F300000839764127060614318218_950.jpg" width="765" height="574" alt="BMW M1 Hood">
            <br/>
        </div>
    </div>
</section>

<script src="jquery.min.js"></script>
<script src="jquery.lazyload.js"></script>
<script type="text/javascript">
    $(function () {
        $("img.lazy").lazyload();
    });
</script>
</body>
</html>

感谢观看，欢迎交流提供更高效代码（视频懒加载是一样的写法，自己思考一下，不明白可以留言，感谢）

qaakd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
jq插件，图片或者视频懒加载

直接上代码（代码复制即可，插件可以自行百度下载或者在我这里下载）<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>j...
复制链接

扫一扫