87,904
社区成员
发帖
与我相关
我的任务
分享
/*
* jQuery loadImage plugin
* Version 2.0.0-2014.11.03
* Requires jQuery v1.7 or later
*
* @Description: 页面图片加载等候以及加载失败后图片替换
* @Author:
* @CreateDate:
* @UpdateDate: 2014-11-03 14:15:00
*/
(function($){
// plugin definition
$.fn.LoadingImg = function(options) {
// Extend our default options with those provided.
// Note that the first arg to extend is an empty object -
// this is to keep from overriding our "defaults" object.
var opts = $.extend({}, $.fn.LoadingImg.defaults, options);
// Our plugin implementation code goes here.
return this.each(function(){
var that = this;
var src = $(this).attr(opts.imgUrl); //获取当前的imgUrl属性
var img = new Image(); //建立新图片
img.src = src;
// 图片加载失败后替换相应位置为默认图片
$(img).error(function(){
loading.remove();
$(that).attr("src", opts.defaultImg);
$(that).show();
});
var loading = $(opts.loading);
$(this).hide(); //隐藏当前图片
$(this).after(loading); //添加loading图片
// 图片加载完成以后,替换页面对应位置图片的src属性为加载完成的图片
$(img).load(function() { //当前图片下载完毕后
loading.remove();
//clearTimeout(timeout);
$(that).attr("src", src);
$(that).show();
});
/*
var timeout = setTimeout(function() {
loading.remove();
$(that).attr("src", opts.defaultImg);
$(that).show();
}, opts.outTime);
*/
});
};
// plugin defaults - added as a property on our plugin function
$.fn.LoadingImg.defaults = {
loading: "<img alt=\"加载中...\" class=\"financingItemPic hover_transition hover_fade\" title=\"图片加载中...\" src=\"images/image_loading.gif\" />",
defaultImg: 'images/theforecast.jpg',
imgUrl: "imgUrl",
//outTime: 5000,
onLoaded: false
};
})(jQuery);