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的人,给我加了很多工作 ...
随机推荐
- Mac中搭建 iOS 的 React Native 环境
手把手教你在Mac中搭建iOS的 React Native环境 http://www.cnblogs.com/damnbird/p/6074607.html 准备工作 1.你需要一台Mac电脑..(这 ...
- Centos7.4下安装Redis5.0
一.下载Redis Redis下载地址:https://redis.io/download 二.安装依赖包 安装Redis之前需要安装c++命令 yum install gcc-c++ 三.上传并解压 ...
- docker 限制 容器内存 使用
转载 : https://www.cnblogs.com/sparkdev/p/8032330.html 默认情况下容器使用的资源是不受限制的.也就是可以使用主机内核调度器所允许的最大资源.但是在容器 ...
- php 下载文件/直接下载数据内容
思路步骤 * 定义参数 * 魔术方法 * 执行下载 * 获取设置属性函数 * 获取设置文件mime 类型 * 获取设置下载文件名 * 设置header * 下载函数 实现代码 class DownFi ...
- VUE 项目dependency was not found: * !!vue-style-loader!css-loader? 解决方案
用npm run dev 运行vue项目时,出现以下错误: ERROR Failed to compile with errors :: This dependency was not found: ...
- [Re:从零开始的分布式] 0.x——分布式锁概述
为什么需要分布式锁 Martin Kleppmann是英国剑桥大学的分布式系统的研究员,Martin认为一般我们使用分布式锁有两个场景: 效率:使用分布式锁可以避免不同节点重复相同的工作,这些工作会浪 ...
- 【数据库】:关于DB2数据库错误提示说明
SQLSTATE 消息 本节列示 SQLSTATE 及其含义.SQLSTATE 是按类代码进行分组的:对于子代码,请参阅相应的表. 表 2. SQLSTATE 类代码类 代码 含义 要获得子代码, 参 ...
- CentOS开放端口号
#vi /etc/sysconfig/iptables 在打开的文件中增加一份端口配置信息: A INPUT -p tcp -m state --state NEW -m tcp --dport 81 ...
- 非常不错的app和网站
置顶: word.pdf之间相互转换的网站: https://www.addpdf.cn 很棒啊 1. Global Potplayer 这个软件简直了,播放各种视频, 无论是本地的,还是在线的,都非 ...
- Java并发编程——阻塞队列BlockingQueue
Java 并发编程系列文章 Java 并发基础——线程安全性 Java 并发编程——Callable+Future+FutureTask java 并发编程——Thread 源码重新学习 java并发 ...