JQuery图片加载显示loading和加载失败默认图片
在很多时候我们需要用到图片加载功能,在网上搜资料后就想为了以后使用方便重新整理了下,结果如图:
最后一张是加载失败显示的图片,没找到合适的图片,先用他顶替。
页面引用
<div class="container">
<div class="row block" id="img-list">
<div class="col-md-3">
<img src="/Assets/OnePiece/1.jpg" class="img-thumbnail">
</div>
<div class="col-md-3">
<img src="/Assets/OnePiece/2.jpg" class="img-thumbnail">
</div>
<div class="col-md-3">
<img src="/Assets/OnePiece/3.jpg" class="img-thumbnail">
</div>
<div class="col-md-3">
<img src="/Assets/OnePiece/4.jpg" class="img-thumbnail">
</div>
<div class="col-md-3">
<img src="/Assets/OnePiece/5.jpg" class="img-thumbnail">
</div>
<div class="col-md-3">
<img src="/Assets/OnePiece/6.jpeg" class="img-thumbnail">
</div>
<div class="col-md-3">
<img src="/Assets/OnePiece/7.jpg" class="img-thumbnail">
</div>
<div class="col-md-3">
<img src="/Assets/OnePiece/8.jpg" class="img-thumbnail">
</div>
</div>
</div>
<script src="~/Scripts/ImgLoading/ImgLoading.js"></script>
<script>
$("#img-list").ImgLoading({
errorimg: "/Scripts/ImgLoading/images/noimage.png",
loadimg: "/Scripts/ImgLoading/images/load.gif",
timeout: 800
});
</script>
下面是插件脚本,为了突出加载的效果就加上了延迟时间。
;(function ($) {
$.fn.extend({
ImgLoading: function (options) {
var defaults = {
errorimg: "http://www.oyly.net/Images/default/Journey/journeydetail.png",
loadimg: "http://www1.ytedu.cn/cnet/dynamic/presentation/net_23/images/loading.gif",
Node: $(this).find("img"),
timeout: 1000
};
var options = $.extend(defaults, options);
var Browser = new Object();
var plus = {
BrowserVerify:function(){
Browser.userAgent = window.navigator.userAgent.toLowerCase();
Browser.ie = /msie/.test(Browser.userAgent);
Browser.Moz = /gecko/.test(Browser.userAgent);
},
EachImg: function () {
defaults.Node.each(function (i) {
var img = defaults.Node.eq(i);
plus.LoadEnd(Browser, img.attr("imgurl"), i, plus.LoadImg);
})
},
LoadState:function(){
defaults.Node.each(function (i) {
var img = defaults.Node.eq(i);
var url = img.attr("src");
img.attr("imgurl", url);
img.attr("src",defaults.loadimg);
})
},
LoadEnd: function (Browser, url, imgindex, callback) {
var val = url;
var img = new Image();
if (Browser.ie) {
img.onreadystatechange = function () {
if (img.readyState == "complete" || img.readyState == "loaded") {
callback(img, imgindex);
}
}
} else if (Browser.Moz) {
img.onload = function () {
if (img.complete == true) {
callback(img, imgindex);
}
}
}
img.onerror = function () { img.src = defaults.errorimg }
img.src = val;
},
LoadImg: function (obj, imgindex) {
setTimeout(function () {
defaults.Node.eq(imgindex).attr("src", obj.src);
}, defaults.timeout);
}
}
plus.LoadState();
plus.BrowserVerify();
plus.EachImg();
}
});
})(jQuery);
脚本是从网上搜索代码之后整理的,也是第一次写插件,如果有啥写的不对的,还请多多指教!
JQuery图片加载显示loading和加载失败默认图片的更多相关文章
- img加载不出来,给个默认图片。
忽然发现,jq里也有坑,很多东西莫名其妙的被废弃了……所以,只能用原生js来做了: $('img').each(function() { if (!this.complete || typeof th ...
- jquery Ajax请求中显示Loading...
jquery Ajax请求中显示Loading... $('#btnTest').click(function(){ $.ajax({ url ---- ,根据你需要设置 ...
- 图片未完成加载显示loading
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- image的加载事件(onload)和加载状态(complete)
之前做过这样一个需求,要让商家页的商家图片按照图片外面box的大小等比例缩放.之前的想法是在页面中先输出图片的src,然后在页面底部初始化js,然后在js中写相应的可以使图片按照box的大小等比例缩放 ...
- img图片加载失败默认图片
<img :src="item.goods_pic" onerror="javascript:this.src='../static/images/default. ...
- IOS之文件夹创建、删除,图片在本地的保存和加载
本文转自http://blog.csdn.net/toddmi/article/details/8204102 = (NSCachesDirectory, NSUserDomainMask, YES) ...
- 【html+css3】在一张jpg图片上,显示多张透明的png图片
1.需求:在一个div布局里面放置整张jpg图片,然后在jpg图片上显示三张水平展示的透明png图片,且png外层用a标签包含菜单 2.效果图: 3.上图,底层使用蓝色jpg图片,[首页].[购物车] ...
- Android图片加载库:最全面的Picasso讲解
前言 上文已经对当今 Android主流的图片加载库 进行了全面介绍 & 对比 如果你还没阅读,我建议你先移步这里阅读 今天我们来学习其中一个Android主流的图片加载库的使用 - Pica ...
- 使用HTML5 canvas做地图(3)图片加载平移放大缩小
终于开始可以写代码了,手都开始痒了.这里的代码仅仅是在chrome检测过,我可以肯定的是IE10以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作 ...
随机推荐
- [javascript]—jQuery解析本地 XML 文档
Create a jQuery object using an XML string and obtain the value of the title node. <!doctype html ...
- tf入门-池化函数 tf.nn.max_pool 的介绍
转载自此大神 http://blog.csdn.net/mao_xiao_feng/article/details/53453926 max pooling是CNN当中的最大值池化操作,其实用法和卷积 ...
- SaltStack Grains 详解
简介 Grains 是SaltStack 的重要组件之一.主要记录minion的静态信息,比如CPU,内存,磁盘,网络信息等.Grains信息是minion启动时汇报给Master的. 刷新grain ...
- 2016级算法期末模拟练习赛-E.AlvinZH的青春记忆III
1083 AlvinZH的青春记忆III 思路 难题,二分图. 说这是一个考察二分图的题目,你可以会说"不可能",这哪里像一个二分图了!这真的是一个二分图,考察的是最小顶点覆盖. ...
- HBTS(HBOI) 2019 真实退役记
Day 0 早上迷迷糊糊醒了不知道多久,反正差不多的时间被叫醒了,然后走去了火车站. 这次终于取到了蓝色的车票,以前去武汉的车票都取的红色不知道为什么-- 在火车上看了<悲伤逆流成河>,稍 ...
- RocketMQ消息发送的队列选择与容错策略
一个topic有多个队列,分散在不同的broker.producer在发送消息的时候,需要选择一个队列 producer发送消息全局时序图: 队列选择与容错策略结论: 在不开启容错的情况下,轮询队列进 ...
- Python爬虫之XML
一.请求参数形式为xml 举例说明. 现在有这样一个网址:https://www.runff.com/html/live/s1484.html:想要查询图片列表,打开F12,观察到请求如下: 这里的请 ...
- oracle创建表空间个用户四部曲
/*分为四步 *//*第1步:创建临时表空间 */create temporary tablespace user_temp tempfile 'D:\oracle\oradata\Oracle9 ...
- C#原生压缩和解压缩方法
string path = AppDomain.CurrentDomain.BaseDirectory; string startPath = @"c:\Client"; stri ...
- WP调用api
private string GetText() { string resultString = string.Empty; HttpWebRequest request = HttpWebReque ...