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

最新推荐文章于 2024-08-20 10:32:53 发布

原创最新推荐文章于 2024-08-20 10:32:53 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #UI #JavaScript #ViewUI

页面图片加载等候以及加载失败后图片替换专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的图片加载插件，该插件能够处理图片加载等待以及加载失败后的替换操作。通过自定义选项，用户可以设置加载提示、默认图片及超时时间，确保网站的图片加载体验更加流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


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