图片延迟加载

官网:http://www.appelsiini.net/projects/lazyload

使用例子:http://demo.phpfs.com/lazyload/

代码下载:lazyload

代码解析

$(function(){
	var ERROR_IMG = './img/image_err.gif';
	var LOADER_IMG = './img/lazy_loading.gif';
	$("img").one("error", function() {
		$(this).attr("src", ERROR_IMG);
	});
	$.each($("img"), function(i, n) {
		if ($(n).attr("src") == '')
			$(n).attr("src", ERROR_IMG);
	});
	$(".lazy").lazyload({
		placeholder : LOADER_IMG,//图片提前占位 
		threshold : 0,//参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.
		event : "scroll",//触发事件
		effect : "fadeIn",//图片加载效果
		failurelimit : 10
//参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,
//但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题
	});
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏郭霖

Android最佳性能实践(四)——布局优化技巧

在前面几篇文章当中,我们学习了如何通过合理管理内存,以及高性能编码技巧的方式来提升应用程序的性能。然而实际上界面布局也会对应用程序的性能产生比较大的影响,如果布...

2428
来自专栏WindCoder

为form表单相关组件添加适用于手机上的背景

将主要的代码记录分享出来,以下内容当初是为了适应于手机端,PC端直接引用会出现格式问题,具体的大家自己修改css样式吧,Dome会在最后放出一个整体的。

832
来自专栏菩提树下的杨过

silverlight数据绑定模式TwoWay,OneWay,OneTime的研究

asp.net开发中,数据绑定是一个很简单的概念,控件与数据绑定后,控件可以自动把数据按一定的形式显示出来。(当然控件上的值改变后,可以通过提交页面表单,同时后...

2316
来自专栏LinXunFeng的专栏

iOS - Swift UIButton中ImageView的animationImages动画执行完毕后,图标变暗

1613
来自专栏极乐技术社区

微信小程序那点事:特性总结

一、微信小程序运行环境 1、完全封闭的环境不等于浏览器环境 2、WXML/WXSS/JS格式 3、WXML 不等于 HTML 4、WX...

2226
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(二)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

1694
来自专栏Golang语言社区

GO语言实现的端口扫描器分享

//GO语言 实现端口扫描 //缺陷 //port 无法设置成全局变量不知道怎么设置的 //var l = list.New() ...

6015
来自专栏青玉伏案

iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)

这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动。于是乎就有了今天这篇博客,...

3078
来自专栏IMWeb前端团队

React16中的服务端渲染(译)

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 React 16发布了。 React 16有很多令人兴奋的新东...

8929
来自专栏Google Dart

AngularDart Material Design 列表 顶

它构成了选择和菜单组件的基础。 MaterialListComponent类充当提供样式和收集项事件的能力的列表的根节点。

1182

扫码关注云+社区

领取腾讯云代金券