插件：★★★ !!!图片懒加载 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="data: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>

插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js的更多相关文章

js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用一.总结一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
[js开源组件开发]图片懒加载lazyload
图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...
图片懒加载lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
图片懒加载--lazyload.js的用法
这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...
前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
前端性能优化--图片懒加载(lazyload image)
话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...
前端性能优化成神之路--图片懒加载(lazyload image)
图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求什么是懒加载懒 ...

随机推荐

计算MySQL的内存峰值公式（转)
-- 计算MySQL的内存峰值公式,计算所有的连接满了的情况下: select (@@key_buffer_size + @@query_cache_size + @@tmp_table_size ...
Azure ARM (18) 将Azure RM Manage Disk托管磁盘的Image，跨订阅迁移
<Windows Azure Platform 系列文章目录> 先挖一个坑,以后再埋. 最近遇到一个客户需求,客户使用了Azure RM Manage Disk托管磁盘,然后捕获镜像做成了 ...
CentOS 7.4 初次手记：第四章 CentOS安全了解
第四章 CentOS安全了解... 66 第一节 user.group.chmod. 66 I 10位文件属性... 66 II user/group增删改... 67 III user/group配 ...
bzoj4933: 妙
Description Mr.董已经成长为一个地区的领袖,真是妙啊.董所在的地区由n个小区域构成,这些小区域构成了一棵树,每个小区域都有一个重要程度,一个连通块的重要程度为其包含的小区域重要程度之和 ...
java设计模式-Iterator
Iterator模式主要是用在容器的遍历上,其他的地方都不怎么用:理解一下,会用了就可以了: 1.背景请动手自己写一个可以动态添加对象的容器: 代码: ArrayList.java(是自己实现 ...
PAT 乙级 1046 划拳(15) C++版
1046. 划拳(15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 划拳是古老中国酒文化的一个有趣的组成部分 ...
[UE4]暂停游戏、退出游戏、游戏输入模式
游戏主界面WB_Main蓝图 Set Game Paused:暂停游戏 Show Mouse Cursor:显示鼠标 Set Input Mode:设置游戏输入模式(游戏和UI).仅仅游戏.仅仅UI( ...
第11课 std::bind和std::function（2）_std::bind绑定器
1. 温故知新:std::bind1st和std::bind2nd (1)bind1st.bind2nd首先它们都是函数模板,用于将参数绑定到可调用对象(如函数.仿函数等)的第1个或第2个参数上. ( ...
XML与实体的相互转化
using System; using System.Linq; using System.Xml; using System.Reflection; using System.Data; using ...
python基础知识-（1）语法基础知识总结(转载）
1.Python标识符在 Python 里,标识符有字母.数字.下划线组成. 在 Python 中,所有标识符可以包括英文.数字以及下划线(_),但不能以数字开头. Python 中的标识符是区分大 ...

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

插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js的更多相关文章

随机推荐

热门专题