图片预加载、图片延迟加载插件

网站上经常会有这种现象。
1、带有图片的列表页面图片没有加载过来时候，页面排版是乱的。
2、图片加载失败后显示一个裂痕玻璃图片并不友好
为了解决这些现象我自己封装了了个插件：

/*图片加载未完成显示占位图*/
//判断手机内核
var local_Browser=new Object();
local_Browser.userAgent=window.navigator.userAgent.toLowerCase();
local_Browser.ie=/msie/.test(local_Browser.userAgent);
// local_Browser.Moz=/gecko/.test(local_Browser.userAgent);
//判断是否加载完成
var img_errors=0;
function local_Imagess(url,imgid,callback){var val=url;var img=new Image();if(local_Browser.ie){img.onreadystatechange =function(){if(img.readyState=="complete"||img.readyState=="loaded"){callback(img,imgid);}}}else{img.οnlοad=function(){if(img.complete==true){callback(img,imgid);}}}

//如果不是wifi调用小图if(!_gw_wifi_conn){if(url==undefined)return;if(url.lastIndexOf("icon_")>=0 || url.lastIndexOf("small_")>=0){img.οnerrοr=function(){img.src=imgid.attr('src');}}else{pos=url.lastIndexOf(".");val=url.substr(0,pos)+"_s"+url.substr(pos);img.οnerrοr=function(){img.src=url;img_errors++;if(img_errors>200){img.src="";}}}}else{img.οnerrοr=function(){img.src=imgid.attr('src');}}//如果因为网络或图片的原因发生异常，则显示该图片img.src=val;
}
//显示图片
function checkimg(obj,imgid){imgid.attr('src',obj.src)
}

调用方式如：

rsrc为真实地址 src是默认图片

$("img[rsrc]").each(function(index,domEle){local_Imagess($(this).attr('rsrc'),$(this),checkimg);});

2、echo.js

插件描述：和 Lazy Load 一样，Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件，而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库，可独立使用。并且 Echo.js 非常小巧，压缩后不足 1KB。

兼容性

Echo.js 使用了 HTML5 的 date 属性，并且需要获取该属性的值，所以它并不兼容 IE6、IE7。虽然 Lazy Load 也使用了 HTML5 的 date 属性，但它获取值的方法不一样。

使用方法

1、引入文件

1	`<` `script` `src` `=` `"js/echo.min.js"` `></` `script` `>`

2、HTML

1	`<` `img` `src` `=` `"images/blank.gif"` `alt` `=` `"pic"` `data-echo` `=` `"img/pic.jpg"` `width` `=` `"640"` `height` `=` `"480"` `>`

blank.gif 是一个 1 x 1 的图片，用做默认图片，data-echo 的属性值是图片的真实地址。同样最好给图片设置宽度和高度，或者在 CSS 中设置也可以，否则似乎很底部很底部的图片才会延迟加载。

3、JavaScript

Echo.init({

offset: 0,

throttle: 0

});

参数

参数	说明
offset	离可视区域多少像素的图片可以被加载
throttle	图片延迟多少毫秒加载来源： <http://www.jq22.com/jquery-info660>

图片预加载、图片延迟加载插件相关推荐

图片预加载与图片懒加载
图片预加载与图片懒加载图片预加载图片预加载主要是针对非icon类图片. 加载快,有良好的用户体验. 提前加载图片,当用户需要查看时可直接从本地缓存中渲染.可能因为图片很大,浏览器显示出它会用很长的 ...
微信 html自动加载js,微信小程序实现图片预加载组件
网页中的图片预加载图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.我们知道在 Web 页面中实现图片的预加载 ...
jquery图片预加载+自动等比例缩放插件
/* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明: ...
图片预加载插件 preLoad.js
1.preLoad.js插件 1 /*! 2 * preLoad.js v1.0 3 * (c) 2017 Meng Fangui 4 * Released under the MIT License ...
jQuery插件之图片预加载
背景: 图片是web页面的重要组成部分,也是前端页面优化的重要内容.当用户访问一个比较庞大的页面时,若相关资源没有提前加载,可能会展示给用户一片空白,从而导致用户流失等:再比如受网速的影响,资源加载时 ...
html页面预加载图片不出来,页面图片预加载与懒加载策略
在图片的加载策略之前,我们先来了解下html网页中,图片的不同位置的图片分别是在什么时候发起图片资源请求的 img 标签 img标签会在html渲染解析到的时候,如果解析到img src值,则浏览器会 ...
html加载图片有超时时间吗,[前端]图片预加载方法
目录 1. 使用jQuery图片预加载(延迟加载)插件Lazy Load Lazy Load也叫惰性加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似 ...
图片预加载学习(二)：有序加载之图片切换
基本效果同前一篇,业务有所变化:前一篇是先显示进度条待所有的图片加载完成了再显示图片,这一篇是先显示第一张图片然后依次加载其他图片(比较适合于有内容的图片,人在看第一张图片时程序默默的加载后面的图片) ...
图片预加载和懒加载的多种方法
图片预加载和懒加载图片懒加载在渲染页面的时候,先将图片用一张默认图片代替,当图片到达浏览器可视区域时,才显示真实的图片. 这样的好处是,可以减缓服务器负担,加快初始界面的渲染速度. 实现方式: 使 ...
imageReady 图片预加载
imageReady javascript图片预加载,监测图片加载完成,获取图片真实尺寸的组件(图片延迟加载) 如何使用 // 首先在页面中引入imageReady.js/** * @param im ...

图片预加载、图片延迟加载插件

网站上经常会有这种现象。
1、带有图片的列表页面图片没有加载过来时候，页面排版是乱的。
2、图片加载失败后显示一个裂痕玻璃图片并不友好
为了解决这些现象我自己封装了了个插件：

2、echo.js

兼容性

使用方法

参数

图片预加载、图片延迟加载插件相关推荐

最新文章

热门文章

图片预加载、图片延迟加载插件

网站上经常会有这种现象。 1、带有图片的列表页面图片没有加载过来时候，页面排版是乱的。 2、图片加载失败后显示一个裂痕玻璃图片 并不友好 为了解决这些现象 我自己封装了了个插件：

2、echo.js

兼容性

使用方法

参数

图片预加载、图片延迟加载插件相关推荐

最新文章

热门文章

网站上经常会有这种现象。
1、带有图片的列表页面图片没有加载过来时候，页面排版是乱的。
2、图片加载失败后显示一个裂痕玻璃图片并不友好
为了解决这些现象我自己封装了了个插件：