页面图片加载等候以及加载失败后图片替换代码,JS代码库,德仔网

代码语言

代码分类

【JS】页面图片加载等候以及加载失败后图片替换

作者:白文 / 发布于2014/11/7/ 597

页面图片加载等候以及加载失败后图片替换


	/*
	* 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);

试试其它关键字

　图片加载　

同语言下

可能有用的

白文贡献的其它代码(6)