在很多时候我们需要用到图片加载功能,在网上搜资料后就想为了以后使用方便重新整理了下,结果如图:

最后一张是加载失败显示的图片,没找到合适的图片,先用他顶替。

页面引用

<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和加载失败默认图片的更多相关文章

  1. img加载不出来,给个默认图片。

    忽然发现,jq里也有坑,很多东西莫名其妙的被废弃了……所以,只能用原生js来做了: $('img').each(function() { if (!this.complete || typeof th ...

  2. jquery Ajax请求中显示Loading...

    jquery Ajax请求中显示Loading... $('#btnTest').click(function(){      $.ajax({           url ---- ,根据你需要设置 ...

  3. 图片未完成加载显示loading

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  4. image的加载事件(onload)和加载状态(complete)

    之前做过这样一个需求,要让商家页的商家图片按照图片外面box的大小等比例缩放.之前的想法是在页面中先输出图片的src,然后在页面底部初始化js,然后在js中写相应的可以使图片按照box的大小等比例缩放 ...

  5. img图片加载失败默认图片

    <img :src="item.goods_pic" onerror="javascript:this.src='../static/images/default. ...

  6. IOS之文件夹创建、删除,图片在本地的保存和加载

    本文转自http://blog.csdn.net/toddmi/article/details/8204102 = (NSCachesDirectory, NSUserDomainMask, YES) ...

  7. 【html+css3】在一张jpg图片上,显示多张透明的png图片

    1.需求:在一个div布局里面放置整张jpg图片,然后在jpg图片上显示三张水平展示的透明png图片,且png外层用a标签包含菜单 2.效果图: 3.上图,底层使用蓝色jpg图片,[首页].[购物车] ...

  8. Android图片加载库:最全面的Picasso讲解

    前言 上文已经对当今 Android主流的图片加载库 进行了全面介绍 & 对比 如果你还没阅读,我建议你先移步这里阅读 今天我们来学习其中一个Android主流的图片加载库的使用 - Pica ...

  9. 使用HTML5 canvas做地图(3)图片加载平移放大缩小

    终于开始可以写代码了,手都开始痒了.这里的代码仅仅是在chrome检测过,我可以肯定的是IE10以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作 ...

随机推荐

  1. Mac中搭建 iOS 的 React Native 环境

    手把手教你在Mac中搭建iOS的 React Native环境 http://www.cnblogs.com/damnbird/p/6074607.html 准备工作 1.你需要一台Mac电脑..(这 ...

  2. Centos7.4下安装Redis5.0

    一.下载Redis Redis下载地址:https://redis.io/download 二.安装依赖包 安装Redis之前需要安装c++命令 yum install gcc-c++ 三.上传并解压 ...

  3. docker 限制 容器内存 使用

    转载 : https://www.cnblogs.com/sparkdev/p/8032330.html 默认情况下容器使用的资源是不受限制的.也就是可以使用主机内核调度器所允许的最大资源.但是在容器 ...

  4. php 下载文件/直接下载数据内容

    思路步骤 * 定义参数 * 魔术方法 * 执行下载 * 获取设置属性函数 * 获取设置文件mime 类型 * 获取设置下载文件名 * 设置header * 下载函数 实现代码 class DownFi ...

  5. 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: ...

  6. [Re:从零开始的分布式] 0.x——分布式锁概述

    为什么需要分布式锁 Martin Kleppmann是英国剑桥大学的分布式系统的研究员,Martin认为一般我们使用分布式锁有两个场景: 效率:使用分布式锁可以避免不同节点重复相同的工作,这些工作会浪 ...

  7. 【数据库】:关于DB2数据库错误提示说明

    SQLSTATE 消息 本节列示 SQLSTATE 及其含义.SQLSTATE 是按类代码进行分组的:对于子代码,请参阅相应的表. 表 2. SQLSTATE 类代码类 代码 含义 要获得子代码, 参 ...

  8. CentOS开放端口号

    #vi /etc/sysconfig/iptables 在打开的文件中增加一份端口配置信息: A INPUT -p tcp -m state --state NEW -m tcp --dport 81 ...

  9. 非常不错的app和网站

    置顶: word.pdf之间相互转换的网站: https://www.addpdf.cn 很棒啊 1. Global Potplayer 这个软件简直了,播放各种视频, 无论是本地的,还是在线的,都非 ...

  10. Java并发编程——阻塞队列BlockingQueue

    Java 并发编程系列文章 Java 并发基础——线程安全性 Java 并发编程——Callable+Future+FutureTask java 并发编程——Thread 源码重新学习 java并发 ...