两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js---转载
jquery.scrollLoading方法
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="Scripts/jquery.scrollLoading.js"></script>
<script>
$(function(){
$(".scrollLoading").scrollLoading();
});
</script>
</head>
<body>
<h2>页面图片等元素滚动动态加载技术</h2>
<br />
<img class="scrollLoading" data-url="images/mm/00_00.jpg" src="data:images/pixel.gif" width="630" height="420" style="background:url(images/loading.gif) no-repeat center;" />
<br /><br /><br /><br /><br /><br />
<img class="scrollLoading" data-url="images/mm/00_01.jpg" src="data:images/pixel.gif" width="630" height="420" style="background:url(images/loading.gif) no-repeat center;" />
<br /><br /><br /><br /><br /><br />
<img class="scrollLoading" data-url="images/mm/00_02.jpg" src="data:images/pixel.gif" width="630" height="420" style="background:url(images/loading.gif) no-repeat center;" />
<br /><br /><br /><br /><br /><br />
<img class="scrollLoading" data-url="images/mm/00_03.jpg" src="data:images/pixel.gif" width="630" height="420" style="background:url(images/loading.gif) no-repeat center;" />
<br /><br /><br /><br /><br /><br />
<img class="scrollLoading" data-url="images/mm/00_04.jpg" src="data:images/pixel.gif" width="630" height="420" style="background:url(images/loading.gif) no-repeat center;" />
<br /><br /><br /><br /><br /><br />
<img class="scrollLoading" data-url="images/mm/00_05.jpg" src="data:images/pixel.gif" width="630" height="420" style="background:url(images/loading.gif) no-repeat center;" />
<br /><br /><br /><br /><br /><br />
<img class="scrollLoading" data-url="images/mm/00_06.jpg" src="data:images/pixel.gif" width="630" height="420" style="background:url(images/loading.gif) no-repeat center;" />
<br /><br /><br /><br /><br /><br />
<img class="scrollLoading" data-url="images/mm/00_07.jpg" src="data:images/pixel.gif" width="630" height="420" style="background:url(images/loading.gif) no-repeat center;" />
<br /><br /><br /><br /><br /><br />
<img class="scrollLoading" data-url="images/mm/00_08.jpg" src="data:images/pixel.gif" width="630" height="420" style="background:url(images/loading.gif) no-repeat center;" />
<br /><br /><br /><br /><br /><br />
<img class="scrollLoading" data-url="images/mm/00_09.jpg" src="data:images/pixel.gif" width="630" height="420" style="background:url(images/loading.gif) no-repeat center;" />
</body>
</html>
js
/*!
* jquery.scrollLoading.js
* by zhangxinxu http://www.zhangxinxu.com/wordpress/?p=1259
* 2010-11-19 v1.0
* 2012-01-13 v1.1 偏移值计算修改 position → offset
* 2012-09-25 v1.2 增加滚动容器参数, 回调参数
* 2014-08-11 v1.3 修复设置滚动容器参数一些bug, 以及误删posb值的一些低级错误
*/
(function($) {
$.fn.scrollLoading = function(options) {
var defaults = {
attr: "data-url",
container: $(window),
callback: $.noop
};
var params = $.extend({}, defaults, options || {});
params.cache = [];
$(this).each(function() {
var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
//重组
var data = {
obj: $(this),
tag: node,
url: url
};
params.cache.push(data);
}); var callback = function(call) {
if ($.isFunction(params.callback)) {
params.callback.call(call.get(0));
}
};
//动态显示数据
var loading = function() { var contHeight = params.container.height();
if (params.container.get(0) === window) {
contop = $(window).scrollTop();
} else {
contop = params.container.offset().top;
} $.each(params.cache, function(i, data) {
var o = data.obj, tag = data.tag, url = data.url, post, posb; if (o) {
post = o.offset().top - contop, posb = post + o.height();
if ((post >= 0 && post < contHeight) || (posb > 0 && posb <= contHeight)) {
if (url) {
//在浏览器窗口内
if (tag === "img") {
//图片，改变src
callback(o.attr("src", url));
} else {
o.load(url, {}, function() {
callback(o);
});
}
} else {
// 无地址，直接触发回调
callback(o);
}
data.obj = null;
}
}
});
}; //事件触发
//加载完毕即执行
loading();
//滚动执行
params.container.bind("scroll", loading);
};
})(jQuery);
jquery.lazyload.js方法
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script>
function checkbrowse() {
var ua = navigator.userAgent.toLowerCase();
var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['', 'mozilla'])[1];
var r = '(?:' + is + '|version)[\\/: ]([\\d.]+)';
var v = (ua.match(new RegExp(r)) || [])[1];
jQuery.browser.is = is;
jQuery.browser.ver = v;
return {
'is': jQuery.browser.is,
'ver': jQuery.browser.ver
}
}
var public = checkbrowse();
var showeffect = "";
if ((public['is'] == 'msie' && public['ver'] < 8.0)) {
showeffect = "show"
} else {
showeffect = "fadeIn"
} $(function(){
$("img").lazyload({
threshold : 200,
effect : showeffect
});
});
</script>
</head>
<body>
<h2>页面图片等元素滚动动态加载技术</h2>
<br />
<img original="images/mm/1.jpg" src="data:images/loading.gif" width="630" height="420" />
<br /><br /><br /><br /><br /><br />
<img original="images/mm/2.jpg" src="data:images/loading.gif" width="630" height="420" />
<br /><br /><br /><br /><br /><br />
<img original="images/mm/3.jpg" src="data:images/loading.gif" width="630" height="420" />
<br /><br /><br /><br /><br /><br />
<img original="images/mm/4.jpg" src="data:images/loading.gif" width="630" height="420" />
<br /><br /><br /><br /><br /><br />
<img original="images/mm/5.jpg" src="data:images/loading.gif" width="630" height="420" />
<br /><br /><br /><br /><br /><br />
<img original="images/mm/6.jpg" src="data:images/loading.gif" width="630" height="420" />
<br /><br /><br /><br /><br /><br />
<img original="images/mm/7.jpg" src="data:images/loading.gif" width="630" height="420" />
<br /><br /><br /><br /><br /><br />
<img original="images/mm/8.jpg" src="data:images/loading.gif" width="630" height="420" />
<br /><br /><br /><br /><br /><br />
<img original="images/mm/9.jpg" src="data:images/loading.gif" width="630" height="420" />
<br /><br /><br /><br /><br /><br />
<img original="images/mm/10.jpg" src="data:images/loading.gif" width="630" height="420" />
</body>
</html>
js
/*
* Lazy Load - jQuery plugin for lazy loading images
*
* Copyright (c) 2007-2009 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* http://www.appelsiini.net/projects/lazyload
*
* Version: 1.5.0
*
*/
(function ($) {
//判断客户端浏览器
function checkbrowse() {
var ua = navigator.userAgent.toLowerCase();
var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['', 'mozilla'])[1];
var r = '(?:' + is + '|version)[\\/: ]([\\d.]+)';
var v = (ua.match(new RegExp(r)) || [])[1];
jQuery.browser.is = is;
jQuery.browser.ver = v;
return {
'is': jQuery.browser.is,
'ver': jQuery.browser.ver
}
} var public = checkbrowse();
$.fn.lazyload = function (options) {
var showeffect = "";
if ((public['is'] == 'msie' && public['ver'] < 8.0)) {
showeffect = "show";
} else {
showeffect = "fadeIn";
}
var settings = {
threshold: 0,
failurelimit: 0,
event: "scroll",
effect: showeffect,
container: window
}; if (options) {
$.extend(settings, options);
}
/* Fire one scroll event per scroll. Not one scroll event per image. */
var elements = this;
if ("scroll" == settings.event) {
$(settings.container).bind("scroll", function (event) {
var counter = 0;
elements.each(function () {
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
/* Nothing. */
} else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
$(this).trigger("appear");
} else {
if (counter++ > settings.failurelimit) {
return false;
}
}
});
/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function (element) {
return !element.loaded;
});
elements = $(temp);
});
}
this.each(function () {
var self = this;
//删除的代码
/* When appear is triggered load original image. */
$(self).one("appear", function () {
if (!this.loaded) {
$("<img />").bind("load", function () {
$(self).hide().attr("src", $(self).attr("original"))[settings.effect](settings.effectspeed);
self.loaded = true;
}).attr("src", $(self).attr("original"));
};
});
/* When wanted event is triggered load original image */
/* by triggering appear. */
if ("scroll" != settings.event) {
$(self).bind(settings.event, function (event) {
if (!self.loaded) {
$(self).trigger("appear");
}
});
}
});
/* Force initial check if images should appear. */
$(settings.container).trigger(settings.event);
return this;
};
/* Convenience methods in jQuery namespace. */
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */
$.belowthefold = function (element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).height() + $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function (element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).width() + $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function (element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top + settings.threshold + $(element).height();
};
$.leftofbegin = function (element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
/* Custom selectors for your convenience. */
/* Use as $("img:below-the-fold").something() */
$.extend($.expr[':'], {
"below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",
"above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",
"right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",
"left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"
});
})(jQuery);
两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js---转载的更多相关文章
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js
估计网上能查到的最多的两种图片延迟加载方法就是jquery.scrollLoading.js与jquery.lazyload.js了,其中jquery.lazyload.js的调用方法因为有网友爆出的 ...
- WPF 下两种图片合成或加水印的方式（转载）
来源:http://www.cnblogs.com/lxblog/ 最近项目中应用多次应用了图片合成,为了今后方便特此记下. 在WPF下有两种图片合成的方式,一种还是用原来C#提供的GDI+方式,命名 ...
- 两种ps切图方法（图层/切片）
两种Ps切图方法 一． 基础操作: a) Ctrl++ 放大图片,ctrl - -缩小图片 b) 按住空格键space+,点击鼠标左键,拖动图片. c) 修改单位,点击编辑 ...
- Convert between cv::Mat and QImage 两种图片类转换
在使用Qt和OpenCV混合编程时,我们有时需要在两种图片类cv::Mat和QImage之间进行转换,下面的代码参考了网上这个帖子: //##### cv::Mat ---> QImage ## ...
- C#两种创建快捷方式的方法
C#两种创建快捷方式的方法http://www.cnblogs.com/linmilove/archive/2009/06/10/1500989.html
- HTTP/HTTPS GET&POST两种方式的实现方法
关于GET及POST方式的区别请参照前面文章:http://www.cnblogs.com/hunterCecil/p/5698604.html http://www.cnblogs.com/hunt ...
- iOS - UITableView中有两种重用Cell的方法
UITableView中有两种重用Cell的方法: - (id)dequeueReusableCellWithIdentifier:(NSString *)identifier; - (id)dequ ...
- Eclipse中SVN的安装步骤（两种）和使用方法
Eclipse中SVN的安装步骤(两种)和使用方法 一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方式.具体步骤如下: 方式一:手动安装 1.下载最新的Eclipse,我的 ...
- TextView两种显示link的方法
TextView两种显示link的方法 一.简介 也是TextView显示文本控件两种方法 也是显示丰富的文本 二.方法 TextView两种显示link的方法 1)通过TextView里面的类ht ...
随机推荐
- Electron 无边框窗口最大化最小化关闭功能
Electron 无边框窗口最大化最小化关闭功能 目的 实现无边框窗口,并添加最大化最小化和关闭功能 前提 了解Electron 主进程和渲染进程的通讯 了解 BrowserWindow相关功能 操作 ...
- 安卓构架组件——概述 Android Architecture Components
谷歌官文文档地址:https://developer.android.google.cn/topic/libraries/architecture 安卓构架组建是库的集合:帮助你设计健壮的.易测试的. ...
- Switch能否用String类型做参数？
switch(expr): 其中,expr参数可以是一个枚举常量(由整型或字符类型实现)或一个整数表达式,其中整数表达式可以是基本类型int或其包装类Integer.由于byte.short和char ...
- Linux centos7安装git
1.下载git wget https://github.com/git/git/archive/v2.14.1.zip 2.安装依赖 yum -y install zlib-devel openssl ...
- BZOJ2143 飞飞侠 & [校内NOIP2018模拟20181026] 最强大脑
Time Limit: 50 Sec Memory Limit: 259 MB Description 飞飞国是一个传说中的国度,国家的居民叫做飞飞侠.飞飞国是一个N×M的矩形方阵,每个格子代表一个街 ...
- spark的知识的链接
IDEA 创建scala spark的Mvn项目:https://blog.csdn.net/u014646662/article/details/84618032 Spark详解03Job 物理执行 ...
- 英语单词operand
operand 来源 [root@centos7 ~]# mkdir mkdir: missing operand 缺少操作数,也就是要创建的目录 Try 'mkdir --help' for mo ...
- 各大漏洞平台及SRC的区别和如何批量刷漏洞
批量刷漏洞: 01刷指纹->02刷原始漏洞->03刷CMS->04刷指定政府.教育->05刷众测平台->06刷SRC->07刷国内外.活动 搜索引擎: 百度.goo ...
- 【LeetCode 76】最小覆盖子串
题目链接 [题解] 尺取法. 用l和r代表一个合法的覆盖子串. 我们不断地扩大右指针. 直到l..r包含T中的所有字母为止(重复的就要两次以上.) 然后我们可以尝试的让l++. 看看新的l..r是不是 ...
- paper 162:卷积神经网络(CNN)解析
卷积神经网络(CNN)解析: 卷积神经网络CNN解析 概揽 Layers used to build ConvNets 卷积层Convolutional layer 池化层Pooling Layer ...