LazyLoad.js及scrollLoading.js
http://blog.csdn.net/ning109314/article/details/7042829
目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片);二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片)。现在最流行使用的就是LazyLoad.js及scrollLoading.js这两个用Jquery写的小插件。
一、LazyLoad实现:
<script type="text/javascript" src="/js/lazyload/jquery.min.js"></script>
<script type="text/javascript" src="/js/lazyload/lazyload.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
effect : "fadeIn"
});
});
</script>
网上找到一个更好点的处理方式,以下方式转自http://www.poluoluo.com/jzxy/201110/145261.html:
<script type="text/javascript">
//首先用JQ判断浏览器类型及版本,如果是IE8以下的浏览器就用effect=show,否则就用effect=fadeIn,判断浏览器版本函数如下
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
}
}
//改造Jquery.LazyLoad.js函数,根据浏览器版本来显示不同的滤镜效果
var public = checkbrowse();
var showeffect = "";
if ((public['is'] == 'msie' && public['ver'] < 8.0)) {
showeffect = "show"
} else {
showeffect = "fadeIn"
}
jQuery(document).ready(function($) {
$("img").lazyload({
placeholder: "http://demo.jb51.net/js/2011/lazyload/Js/lazyload/grey.gif",
effect: showeffect,
failurelimit: 10
})
});
</script>
html:
<img src="/js/lazyload/pixel.gif" original="真实图片路径" />
而LazyLoad只是给你一个延迟加载的假象,每次图片都会加载两次,完全就是一个假象的延迟加载。可以修改LazyLoad文件实现真实延迟加载,本人比较懒,就直接在网上找了一个修改好的,嘿嘿
/*
* 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 ($) {
$.fn.lazyload = function (options) {
var settings = {
threshold: 0,
failurelimit: 0,
event: "scroll",
effect: "show",
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);
二、scrollLoading实现
<script src="/js/lazyload/jquery.scrollLoading.js" type="text/javascript"></script><script type="text/javascript" src="/js/lazyload//jquery_002.js"></script>
<script type="text/javascript" src="/js/lazyload//jquery.js"></script>
<script>
$(function() {
$(".scrollLoading").scrollLoading();
});
</script>
HTML:
<img class="scrollLoading" style="background: url("/js/lazyload/pixel.gif") no-repeat scroll center center transparent;" src="/js/lazyload/pixel.gif" style="WIDTH: 526px; HEIGHT: 293px" data-url="真实路径"/>
scrollLoading的实现相对而言比较麻烦一下
如果需要对应的JS包请去下载:
http://download.csdn.net/detail/ning109314/3882760
LazyLoad.js及scrollLoading.js的更多相关文章
- [转]LazyLoad.js及scrollLoading.js
本文转自:http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动 ...
- 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js
估计网上能查到的最多的两种图片延迟加载方法就是jquery.scrollLoading.js与jquery.lazyload.js了,其中jquery.lazyload.js的调用方法因为有网友爆出的 ...
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js---转载
jquery.scrollLoading方法 html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
- 图片延迟加载scrollLoading.js应用
<ul> <li><a href="http://news.qq.com/" target="_b ...
- 页面滚动图片等元素动态加载插件jquery.scrollLoading.js
如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...
- jq:jQuery库文件jquery.scrollLoading.js使用方法
图片延迟加载,滚动到哪里加载到哪里: 1:头部加载库文件 <script type="text/javascript" src="/js/jquery.scroll ...
- 记录:sea.js和require.js配置 与 性能对比
最近有点忙,很久无写博客,记录一下之前的配置require.js和sea.js的配置.(有误有望提出 require.js 文件目录 /app(项目使用js) /lib(require.js jq存放 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
随机推荐
- 【项目】iOS - 使用UIWebView占用内存过大
通过其他博主介绍的解决这个问题的博客: http://blog.techno-barje.fr//post/2010/10/04/UIWebView-secrets-part1-memory-leak ...
- 在Nginx中部署基于IP的虚拟主机
一.虚拟主机概念 虚拟主机是在网络服务器上划分出一定的磁盘空间供用户放置站点.应用组件等,提供必要的站点功能.数据存放和传输功能.所谓虚拟主机,也叫"网站空间", 就是把一台运行在 ...
- Git创建ssh-key
打开git bash界面,输入: ssh-keygen -t rsa -C "yourname@email.com" 一路回车,后续保持默认值即可. 把C:\users\yourn ...
- ubuntu 重启 nginx 失败,* Restarting nginx nginx ...fail!
ubuntu 重启 nginx 失败,* Restarting nginx nginx ...fail! 执行 nginx 重启服务时,提示失败如下: $ sudo service ngi ...
- 自然语言18_Named-entity recognition
https://en.wikipedia.org/wiki/Named-entity_recognition http://book.51cto.com/art/201107/276852.htm 命 ...
- .Net中使用OracleDataAdapter
本来只想简单记录一下OracleDataAdapter的批量增加和修改用法的,在园子里看到一篇比较详细的就在这分享了(Oracle Data Provider for .NET),虽然用的是 Upda ...
- JQM页面跳转,多种效果
<div data-role="page" id="pageone"> <div data-role="header"&g ...
- IE安全分析
IE安全问题,这个话题似乎很古老了,但是问题又是层出不穷~ 对于IE的安全,我个人认为有两点需要关注,一个是上网的安全,二个是IE解析代码的安全 对于IE上网安全,这是最基本的,也是最常用的了 附上一 ...
- yii2.0-advanced 高级版项目搭建
(一) 原文地址:http://www.yii-china.com/post/detail/1.html (二) 原文地址:http://www.yii-china.com/post/detail/2 ...
- MySql集群FAQ----mysql主从配置与集群区别、集群中需要多少台计算机呢?为什么? 等
抽取一部分显示在这里,如下, What's the difference in using Clustervs using replication? 在复制系统中,一个MySQL主服务器会更新一个或多 ...