js、jquery 图像载入效果 Image Loading Effect

最新推荐文章于 2022-09-22 09:37:28 发布

AspNetSunny

最新推荐文章于 2022-09-22 09:37:28 发布

阅读量1.5k

点赞数

分类专栏： jQuery 文章标签： preload 载入图片 loading effect javascript jquery

本文链接：https://blog.csdn.net/sunnywuxian/article/details/77067611

版权

jQuery 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

Demo下载地址：

https://github.com/SunnyWoo/ImageLoadEffect

代码片段：

var imgList = [
				"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575926968307712/598c24ea85c265245.jpg",
				"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575928688230400/598c24ea85f8e8217.jpg",
				"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575930797707264/598c24ea8617e2486.jpg",
				"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575933506277376/598c24ea863c51554.jpg",
				"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575936371122176/598c24ea865279731.jpg",
				"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575937634938880/598c24ea866901074.jpg",
				"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575939165601792/598c24ea867f08783.jpg"
			];
			
			function loadImage(src, callback) {
				var img = document.createElement("img");
				img.src = src;
				img.addEventListener("load", function() {
					if(this.complete) {
						callback();
					}
				});
			}
			
			var bindHtml = function() {
				var html = '';
				for(var i = 0; i < imgList.length; i++) {
					html += '<span class="col-xs-4 wx-pip middle-xs"><span><img data-src="' + imgList[i] + '" /></span></span>';
				}
				$("#rowList").html(html);

				//循环判断所有的img
				$("#rowList img").each(function() {
					var _this = $(this);
					if(_this.attr("src") == undefined) {
						var _src = _this.attr("data-src");
						loadImage(_src, function() {
							//载入成功后执行 添加延迟 使用中可删除
							setTimeout(function() {
								_this.attr("src", _src);
								_this.parent().css("background-image", "none");
							}, 400);
						});
					}
				});
			};

			bindHtml();