专栏首页我的博客图片延迟加载

图片延迟加载

官网: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 条评论
登录 后参与评论

相关文章

  • Vue引入静态资源

    1、在js被导入或者在vue的template以及css中通过相对路径引入的,这样会被webpack处理

    苦咖啡
  • echo、print、print_r、var_dump使用和区别

    1、echo — Output one or more strings(输出一个或者多个字符串) 2、print — Output a string(输出一个字...

    苦咖啡
  • PHP与Flash as2.0简单交互

    flash文档: mylist = new Object(); mylist.click = function(event:Object){       u...

    苦咖啡
  • 图片瀑布流,so easy!

    简单来说,就是有很多图片平铺在页面上,每张图片的宽度相同,但是高度不同,这样错落有致的排列出 n 列的样子很像瀑布,于是就有了瀑布流图片一说。

    Daotin
  • 图像增强综述

    作者:方阳, 转载请注明地址。 文件和代码可以在Github下载, markdown推荐用typora打开。 这篇文章是DIP的第二次作业,对图像增强技术进...

    努力努力再努力F
  • RGB888 转 YCbCr444 算法的 HDL 实现

    虽说 OV5640 可以通过寄存器的设置,直接输出 YCbCr444 格式的视频流,但为了研究图像处理,以及最基本的视频格式转换,有意执行一次 RGB888转 ...

    碎碎思
  • 图像增强-点、直方图

    Rare0716
  • python爬虫大战京东商城

    写到这里可以看到搜索首页的网址中keyword和wq都是你输入的词,如果你想要爬取更多的信息,可以将这两个词改成你想要搜索的词即可,直接将汉字写上,在请求的时候...

    爱撒谎的男孩
  • 用Wolfram语言把表格图像转换为CSV格式

    在该表中,水平和垂直网格线比单元格的背景更暗。FindPeaks 用于查找这些网格线的位置。getGridLines 将返回包含行和列网格坐标的两个列表的列表。

    WolframChina
  • python模块之io

    当用户进程调用了recvfrom这个系统调用,kernel就开始了IO的第一个阶段:准备数据。对于network io来说,很多时候数据在一开始还没有到达,这个...

    菲宇

扫码关注云+社区

领取腾讯云代金券