正文

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

IP云
IP云V管理员/4 阅读
08/03
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

插件：图片懒加载

jquery.lazyload.js2016-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的更多相关文章

  1. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  2. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  3. js插件---图片懒加载echo&period;js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  4. &lbrack;js开源组件开发&rsqb;图片懒加载lazyload

    图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...

  5. 图片懒加载lazyload&period;js详解

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...

  6. 图片懒加载--lazyload&period;js的用法

    这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...

  7. 前端实现图片懒加载&lpar;lazyload&rpar;的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  8. 前端性能优化--图片懒加载&lpar;lazyload image&rpar;

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  9. 前端性能优化成神之路--图片懒加载&lpar;lazyload image&rpar;

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

随机推荐

  1. MySQL管理之道：性能调优、高可用与监控内置脚本

    MySQL管理之道:性能调优.高可用与监控内置脚本 随书附送脚本 keepalive配置文件和脚本开源工具pssh批量管理服务器(python) 下载地址 http://files.cnblogs.c ...

  2. poj 1430 Binary Stirling Numbers

    Binary Stirling Numbers Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 1761   Accepted ...

  3. 在Ubuntu里部署Javaweb环境脑残版

    最近在瞎折腾Unbunt,喜欢这里的干净和静谧.能留在这里,那么就得在这里工作,于是部署javaweb就成了头件大事了. 咨询了大牛,都说不会命令你玩毛玩linux,但是万万没有想到,原来ubuntu ...

  4. 【NO&period;4】jmeter-cookie管理器

    Compatibility 这种兼容性设计要求是适应尽可能多的不同的服务器,尽管不是完全按照标准来实现的.如果你遇到了解析Cookies的问题,你就可能要用到这一个规范. 有太多的web站点是用CGI ...

  5. spring cloud&plus;dotnet core搭建微服务架构：Api网关（三）

    前言 国庆假期,一直没有时间更新. 根据群里面的同学的提问,强烈推荐大家先熟悉下spring cloud.文章下面有纯洁大神的spring cloud系列. 上一章最后说了,因为服务是不对外暴露的,所 ...

  6. IOS开发之XCode学习009：UIViewController使用

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 通过点击屏幕事件,调用ViewController ...

  7. Java学习--循环语句1

    1. break public class BreakDemo{ // 完成一个四则运算的功能 public static void main(String args[]){ for(int i=0; ...

  8. go语言浮点数

    package main import "fmt" func main() { var num,num1 float32 num = 10 num1 = 100 fmt.Print ...

  9. Python Pandas read&lowbar;csv报错

    为实现文本去重(将前面采集的数据进行两两对比删除重复),写了以下代码. #-*- coding: utf-8 -*-import pandas as pd inputfile = 'e:/data/H ...

  10. 第一次学习 CG&lpar; c for graphic&rpar; 遇到的一大推坑

    1.CG开发环境的配置: 具体的工具包下载及整体的配置过程可以参考:https://blog.csdn.net/seamanj/article/details/8300936. 上面网址的内容是对VS ...