jquery.lazyload.js——图片延迟出现

最新推荐文章于 2019-05-07 13:42:21 发布

21989939

最新推荐文章于 2019-05-07 13:42:21 发布

阅读量345

点赞数

分类专栏：【前端】基础

本文链接：https://blog.csdn.net/qq_21989939/article/details/46575683

版权

【前端】基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<script type="text/javascript" src="./resources/js/jquery.js"></script>
<script type="text/javascript" src="./resources/js/jquery.lazyload.js"></script>
<script type="text/javascript">

    $(document).ready(function() {
         /*图片延迟效果 */
        $("img").lazyload({
            threshold: 10,
            effect: "fadeIn"
        });
    })
</script>
</head>
<body>
    <div>
            <img src="./resources/img/blank.gif" data-original="./resources/img/modo.jpg" width="900px" height="800" >
            <img src="./resources/img/blank.gif" data-original="./resources/img/brandCo4.jpg" width="900px" height="400" >
            <img src="./resources/img/blank.gif" data-original="./resources/img/gaoding1.jpg" width="900" height="400" >
            <img src="./resources/img/blank.gif" data-original="./resources/img/siding1.jpg" width="900" height="400" >
            <img src="./resources/img/blank.gif" data-original="./resources/img/siding1.jpg" width="900" height="200" >
            <img src="./resources/img/blank.gif" data-original="./resources/img/siding1.jpg" width="900" height="200" >
            <img src="./resources/img/blank.gif" data-original="./resources/img/siding1.jpg" width="900" height="200" >
            <img src="./resources/img/blank.gif" data-original="./resources/img/siding1.jpg" width="900" height="200" >
    </div>
</body>