您的位置：首页 > Web前端 > JQuery

jQuery图片加载显示loading效果

2016-11-04 08:33 691 查看

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

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

页面引用

<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图片加载方法汇总》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery 图片加载 loading

相关文章推荐

新的分享

章节导航