html图片加载特效（预加载和加载失败）

调用的方法

$(function () {$("img").delayLoading({// defaultImg: "static/images/timg.gif", // 预加载前显示的图片errorImg: "",                        // 读取图片错误时替换图片(默认：与defaultImg一样)imgSrcAttr: "src",                  // 读取图片的srcsetImg: "originalSrc",              //记录图片路径的属性(默认：originalSrc，把页面img的src属性值传给originalSrc属性)beforehand: 0,                       // 预先提前多少像素加载图片(默认：0)event: "scroll",                      // 触发加载图片事件(默认：scroll)duration: "slow",                    // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000),默认:"normal"container: window,                   // 对象加载的位置容器(默认：window)success: function (imgObj) { },      // 加载图片成功后的回调函数(默认：不执行任何操作)error: function (imgObj) { }         // 加载图片失败后的回调函数(默认：不执行任何操作)});});

需要创建引入lyz.delayLoading.min.js，名字自定义，把下面代码复制进去

jQuery.fn.extend({delayLoading: function(a) {a = jQuery.extend({defaultImg: "",errorImg: "",imgSrcAttr: "src",setImg: "originalSrc",beforehand: 0,event: "scroll",duration: "normal",container: window,success: function() {},error: function() {}}, a || {});if (a.errorImg === undefined || a.errorImg === null || a.errorImg === "") {a.errorImg = a.defaultImg}var e = $(this);$("img[" + a.imgSrcAttr + "]").each(function() {$(this).attr(a.setImg, $(this).attr(a.imgSrcAttr));$(this).attr("src", a.defaultImg)});function g(d) {var b, c;if (a.container === undefined || a.container === window) {b = $(window).scrollTop();c = $(window).height() + $(window).scrollTop()} else {b = $(a.container).offset().top;c = $(a.container).offset().top + $(a.container).height()}return d.offset().top + d.height() + a.beforehand >= b && c >= d.offset().top - a.beforehand}function h(d) {var b, c;if (a.container === undefined || a.container === window) {b = $(window).scrollLeft();c = $(window).width() + $(window).scrollLeft()} else {b = $(a.container).offset().left;c = $(a.container).offset().left + $(a.container).width()}return d.offset().left + d.width() + a.beforehand >= b && c >= d.offset().left - a.beforehand}function f() {e.filter("img[" + a.setImg + "]").each(function(d, b) {if ($(b).attr(a.setImg) !== undefined && $(b).attr(a.setImg) !== null && $(b).attr(a.setImg) !== "" && g($(b)) &&h($(b))) {var c = new Image;c.onload = function() {$(b).attr("src", c.src);a.duration !== 0 && $(b).hide().fadeIn(a.duration);$(b).removeAttr(a.setImg);a.success($(b))};c.onerror = function() {$(b).attr("src", a.errorImg);$(b).removeAttr(a.setImg);a.error($(b))};c.src = $(b).attr(a.setImg)}})}f();$(a.container).bind(a.event, function() {f()})}
});

html图片加载特效（预加载和加载失败）相关推荐

基于jQuery的图片异步加载和预加载实例
如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...
Jquery图片懒加载和预加载
Jquery图片懒加载和预加载懒加载 1.什么是懒加载 Lazy Load也叫懒加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷. ...
javascript图片懒加载与预加载的分析
懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技 ...
jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
img加载本地图片_图片加载技术-懒加载和预加载
懒加载也就是延迟加载. 具体表现为: 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图的路径,这样就只需请求一次,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路 ...
图片的懒加载与预加载
懒加载懒加载:也叫延迟加载,指的是在长网页中延迟加载图片的时机,当用户需要访问时,再去加载,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力. 懒加载的实现原理是:将页面上图 ...
图片的懒加载和预加载？
一.写在前面图片的懒加载和图片的预加载都是前端性能优化的一个方案,当然可能存在不同的应用场景,下面我们将总结一下这两个方案. 二.图片懒加载图片的懒加载是什么? 图片的懒加载指的是在长网页中延迟加 ...
页面优化之懒加载与预加载
1.前言 PC端网速较快,现在普通都是百兆宽带,那么折算一下就是10M/s的下载速度,基本上资源如果在10M以内的话加载还是比较快的. 但是移动端就不行了.移动端需要消耗巨额的流量,所以尽量减少移动端 ...
css 同步加载,同步加载，异步加载，懒加载，预加载
同步加载默认的就是同步加载同步加载: 同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染.流览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作, ...
懒加载和预加载的区别
概念: 懒加载:懒加载也叫延迟加载,JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 区别: 两者的行为是相反的,预加载是 ...

html图片加载特效（预加载和加载失败）

html图片加载特效（预加载和加载失败）相关推荐

最新文章

热门文章