关于layout插件的使用

最新推荐文章于 2022-03-31 04:42:08 发布

暴走的小土豆

最新推荐文章于 2022-03-31 04:42:08 发布

阅读量940

点赞数

分类专栏：插件文章标签：插件

本文链接：https://blog.csdn.net/LiuLee18/article/details/60752727

版权

插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

[插件地址]http://www.appelsiini.net/projects/lazyload

[参考资料]http://www.w3cways.com/1765.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片懒加载</title>
</head>
<body>
<section>
    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

</section>

<script src="jquery.js"></script>

<script src="jquery.lazyload.js"></script>

<script>

$(function(){

     $(".lazy").lazyload({

     effect:"fadeIn"

 });

});  

</script>

</body>

</html>`

注意：
1.给每张图片设置宽高。
2.js引用的顺序。

暴走的小土豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于layout插件的使用

关于layout插件的使用[插件地址]http://www.appelsiini.net/projects/lazyload[参考资料]http://www.w3cways.com/1765.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片懒加载</title></head><
复制链接

扫一扫