zoukankan html css js c++ java

插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

插件：图片懒加载

jquery.lazyload.js　　2016-3-31

插件说明：http://www.w3cways.com/1765.html　　（小插件，好用）

下载地址:

https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script><!-- 图片懒加载 -->
<!-- <script src="/common/js/jquery.lazyload.min.js"></script>-->
<script type="text/javascript">
$(function(){
    //先检测再使用(检测 lazyload 是否被引入)
    if(typeof ($(window).lazyload)=='function'){
        $("img[data-original]").lazyload({ //例:  <img data-original="1.jpg">
            //placeholder : "images/loading.gif",
            effect: "fadeIn"
        });
    }else{
        //if( window.navigator.userAgent.indexOf("Chrome") !== -1 ){
            console.log('lazyload.js未被引入');
        //}
    }
});
</script>
<style>
img{display:block;margin-bottom:10px;border:0px;}
.div1{height:1800px;}
</style>
<div class="div1">用这个div撑出高度，在这个div之下的图片，只有在屏幕滚屏到这里后，才会显示。</div>
<img data-original="images/bg10m_20.jpg" class="">

jquery.scrollLoading.js 　　2016-3-31

http://www.zhangxinxu.com/wordpress/?p=1259

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="/common/js/jquery.scrollLoading.js"></script><!-- 图片懒加载 -->
<script type="text/javascript">
$(function(){
    //先检测再使用(检测 scrollLoading 是否被引入)
    if(typeof ($(window).scrollLoading)=='function'){
        $(".lazy").scrollLoading({
            attr:'dynamic-src'
        });
    }else{
        //if( window.navigator.userAgent.indexOf("Chrome") !== -1 ){
            console.log('scrollLoading.js未被引入');
        //}
    }
});
</script>
<div class="div1">用这个div撑出高度，在这个div之下的图片，只有在屏幕滚屏到这里后，才会显示。</div>
<img dynamic-src="images/bg10m_20.jpg" class="lazy">

图片懒加载

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
    //图片懒加载
    var waterfull = {
        init: function(col) { 
            window.onscroll=this.throttle(this.isScroll);
            this.isScroll();//初始化
        },
        isScroll:function(){
            //console.log("isScroll");
            var _height=parseInt($(window).height());
            var _srcoll=parseInt($(window).scrollTop());
            var _sTop=_height+_srcoll;
            //var _sTop=_height+_srcoll-360;//减一行的高度

            var imgs=$("img[data-src]");
            var e;
            var li_top;
            for(var i=0;i<imgs.length;i++){
                e=$(imgs[i]);
                li_top = e.parents("li").offset().top;
                if(li_top<_sTop){//判断li的top小于(屏幕+滚动高)的高度，即加载
                    if(e.attr("src").length===0){
                        e.attr("src",e.attr("data-src"));
                    }
                    //if(e.attr("src").indexOf("dd.jpg")>0){    e.attr("src",e.attr("data-src"));    }
                }
            }
        },
        throttle: function(fn){
            var timer = null;
            var _this=this;
            return function(){
                var context = _this, args = arguments;
                clearTimeout(timer);
                timer = setTimeout(function(){
                    fn.apply(context,args)}, 150);
            };
        }
    }

    waterfull.init( $("#ul_shoplist"));//图片懒加载

});
</script>
<style type="text/css">
#main{margin:0 auto;width:1100px;}
ul,li{list-style:none;margin:0;padding:0;}
li{float:left;width:360px;;border:1px solid #000;}
img{width:360px;height:360px;}
</style>
</head>
<body>
<div id="main">
<ul id="ul_shoplist">
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b229c200719.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201407/01/53b1f7a1e7a28.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad13d74493a.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad0d105c4a6.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
<li><img src="" data-src="http://cms.csdnimg.cn/article/201406/27/53ad2ef165946.jpg"></a></li>
</ul>
</div>
</body>
</html>

查看全文

相关阅读:
开始接触开源FTP工具 FileZilla
借船过河：一个据说能看穿你的人性和欲望的心理测试
 Git的使用方法级相关资料
 写给自己的一封信：亲爱的自己
 试用豆瓣电台2天
 HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
读《乌合之众》附电子书下载
 快速了解Flash CS5六大特点
 读《每天懂一点成功概率学》
PhotoshopCS6快捷键

原文地址：https://www.cnblogs.com/qq21270/p/3824015.html