对jquery.lazyload.js使用的心得

时间 2019-11-10

标签 jquery.lazyload.js jquery lazyload 使用心得栏目 JQuery 繁體版

原文原文链接

今天想对项目中作一些优化，作一个图懒加载，我用的是jquery.lazyload.js，网址：http://www.jq22.com/jquery-in...。
给的案例是针对img，而后我猜想可否在背景图也可以实现，粗略的看了一下源码，好像是有这个功能的：
javascript

我把本身测试的代码贴出来，包括img和背景图懒加载测试（js和图片须要本身引入）：html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lazy Load Enabled</title>
<!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
<![endif]-->
<style>
    .lazy {
        width: 50%;
        height: 500px;
    }
    .bgs {
        width: 50%;
        height: 500px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
</style>
</head>
<body>

    <img class="lazy" data-original="img/1.jpg">
    <img class="lazy" data-original="img/2.jpg">
    <img class="lazy" data-original="img/3.jpg">
    <img class="lazy" data-original="img/4.jpg">
    <img class="lazy" data-original="img/5.jpg">
    <img class="lazy" data-original="img/6.jpg">
    <!-- 背景图也能够 -->
    <div class="lazy bgs" data-original="img/placeholder.png"></div>

    
    <script src="jquery-1.11.0.min.js"></script>
    <script src="jquery.lazyload.js?v=1.9.1"></script>
    <script type="text/javascript" charset="utf-8">
      $(function() {

        $(".lazy").lazyload({
            //用图片提早占位
            placeholder : "img/placeholder.png", 
            // 载入使用何种效果
            effect: "fadeIn", 
        });
      });
    </script>
</body>
</html>

这个插件的配置http://www.jq22.com/jquery-in...，这里有的。
这篇文章很简单，我写的目的就是为了测试背景图是否能够用。
可是这个插件不管是是用img仍是背景图都宽高都是须要写上去的，写在行内仍是style样式里面均可以，这对页面适配不是很友好，我不知道有没有朋友解决这种问题，若是有的话也能够分享一下。html5

1. jQuery---jquery.color.js和jquery.lazyload.js的使用
2. 对于flex布局的使用心得
3. 使用HtmlParser使用心得
4. NPOI 的使用心得
5. template.js的使用心得
6. 我的EasyUI使用心得
7. Eclipse的使用心得
8. unity animator的使用心得
9. MySql的使用心得
10. Git的使用心得
更多相关文章...
• Hibernate的核心接口 - Hibernate教程
• MyBatis的核心组件 - MyBatis教程
• Composer 安装与使用
• 使用Rxjava计算圆周率