前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >图片延迟加载

图片延迟加载

作者头像
苦咖啡
发布2018-05-08 17:57:32
2.2K0
发布2018-05-08 17:57:32
举报
文章被收录于专栏:我的博客我的博客

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

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

代码下载:lazyload

代码解析

代码语言:javascript
复制
$(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张可见区域外的图片,以避免出现这个问题
	});
});
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2014年7月11日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档