本文共 2731 字，大约阅读时间需要 9 分钟。

关于分屏加载图片，像天猫、京东等电商图片较多页面很长，就采用了延迟加载技术。

目前很流行的做法就是滚动动态加载，显示屏幕之外的图片默认是不加载的，

随着页面的滚动，显示区域图片才被动态加载。

原理其实很简单，默认<img>标签中设置一个特别小的让人看不见的图片作为原始src路径，

再自定义一个属性存放原图片路径，通过绑定滚动事件，检查当前元素是否在浏览器窗口中，

然后替换src路径动态加载图片。

最后发现了一个大神写的jQuery滚动加载插件scrollLoading测试很好用。

源码如下：

(function($) {	$.fn.scrollLoading = function(options) {		var defaults = {			attr: "data-url",			container: $(window),			callback: $.noop		};		var params = $.extend({}, defaults, options || {});		params.cache = [];		$(this).each(function() {			var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);			//重组			var data = {				obj: $(this),				tag: node,				url: url			};			params.cache.push(data);		});				var callback = function(call) {			if ($.isFunction(params.callback)) {				params.callback.call(call.get(0));			}		};		//动态显示数据		var loading = function() {						var contHeight = params.container.height();			if (params.container.get(0) === window) {				contop = $(window).scrollTop();			} else {				contop = params.container.offset().top;			}								$.each(params.cache, function(i, data) {				var o = data.obj, tag = data.tag, url = data.url, post, posb;								if (o) {					post = o.offset().top - contop, posb = post + o.height();					if ((post >= 0 && post < contHeight) || (posb > 0 && posb <= contHeight)) {						if (url) {							//在浏览器窗口内							if (tag === "img") {								//图片，改变src								callback(o.attr("src", url));									} else {								o.load(url, {}, function() {									callback(o);								});							}								} else {							// 无地址，直接触发回调							callback(o);						}						data.obj = null;						}				}			});			};				//事件触发		//加载完毕即执行		loading();		//滚动执行		params.container.bind("scroll", loading);	};})(jQuery);

scrollLoading使用

$(".scrollLoading").scrollLoading();

   
    加载中...
   

会在滚动时加载名为loaded.html的页面，并自动替换里面的内容。

对于常用的图片，还有一点小问题，就是其默认的src图片地址。其src地址不能是真实的图片地址（否则会直接一次性全部加载），也不能是空地址或是坏地址，否则IE浏览器下会出现红叉叉。我的做法是默认链接的是一个1px * 1px的gif透明图片（大小很小），同时可以透出后面加载中gif动画图片，当滚动加载的时候直接把此gif图片替换掉。于是，对于图片，可能就有类似下面的代码：

scrollLoading可选参数

两个可选参数，一个为container表示容器，另一个为callback表示回调。具体参见下表：

$(".scrollLoading").scrollLoading({    container: $("#zxxMainCon"),    callback: function() {        this.style.border = "3px solid #a0b3d6";	    }});

转自

转载地址：http://mijvi.baihongyu.com/