JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<h2>js图片延迟加载demo</h2>
	<img src="images/grey.gif" data-img ="http://m3.img.libdd.com/farm4/d/2014/0111/18/3256C6587D94BDF9E9908908CAB6C5FD_B500_900_500_375.jpeg" width="800" height="600" isload="false"><br/>
	<img src="images/grey.gif" data-img ="http://m3.img.libdd.com/farm4/d/2014/0111/18/23CC5BDD3730A819E498B703A40DE5CF_B250_400_250_187.jpeg" width="800" height="600" isload="false"><br/>
	<img src="images/grey.gif" data-img ="http://m3.img.libdd.com/farm4/d/2014/0111/18/33F69B61E6671E4F6623F0D1084C42A8_B250_400_250_187.jpeg" width="800" height="600" isload="false"><br/>
	<img src="images/grey.gif" data-img ="http://m3.img.libdd.com/farm5/d/2014/0111/18/7B87F0A2209D234D2AB907C62946A7FE_B250_400_250_187.jpeg" width="800" height="600" isload="false"><br/>
	<img src="images/grey.gif" data-img ="http://m2.img.libdd.com/farm5/d/2014/0111/18/C37405D8DBC8D1BF69A9C894C32FA4DA_B250_400_250_187.jpeg" width="800" height="600" isload="false"><br/>
	<img src="images/grey.gif" data-img ="http://m1.img.libdd.com/farm5/d/2014/0111/18/1433297A651DA0329E866FD2D2776C7F_B250_400_250_187.jpeg" width="800" height="600" isload="false">

JavaScript

/**
 * JS图片延迟加载
 * @constructor {DataLazyLoad}
 * @param {options} 对象传参
 * @time 2014-1-10
 */
/*
 * 延迟加载的原理：滚动时：待加载的资源相对于游览器顶端的距离 - threshold <= 可视区域相对于浏览器顶端的距离 true 就加载
 * 否则的话 不加载
 */
 function DataLazyLoad(options){
	
	this.config = {

		container      :   window,   //容器 默认为window
		threshold      :   0,        // 离多少像素渲染图片
		event          :  'scroll',  // 默认为scroll(滚动)
		effect         :  'fadeIn',  // 默认为show 也可以为fadeIn, slideDown 等 jQuery 自带的效果
		effectspeed    :  1000,      // 时间  
		suffix         :  'img',     // img属性 默认以data-img 也可以自定义后缀
		skip_invisible : true       // 如果img标签为隐藏的 那么不强制加载
	};

	this.cache = {};

	this.init(options);
 }
 
 DataLazyLoad.prototype = {
	
	init: function(options){
		
		this.config = $.extend(this.config, options || {});
		var self = this,
			_config = self.config,
			_cache = self.cache;
		
		// 滚动时(或者其他事件) 触发事件
		$(_config.container).unbind(_config.event);
		$(_config.container).bind(_config.event,function(){
			self._update();
		});
        self._update();
	},
	/*
	 * 加载对应的图片
	 */
	_eachImg: function(item) {
		var self = this,
			_config = self.config,
			_cache = self.cache;
		
		if($(item).attr('isload') == 'false') {
			var dataImg = $(item).attr('data-'+_config.suffix),
				src = $(item).attr('src');
			 $(item).hide();
			 $(item).attr('src',dataImg);
			 $(item).attr('data-'+_config.suffix,'');
			 $(item)[_config.effect](_config.effectspeed);
			 $(item).attr('isload','true');
		} 
	},
	_update:function(){
		var self = this,
			_config = self.config,
			_cache = self.cache;
		 if(_config.container === window) {
			 
			 $('img').each(function(index,item){
				// 如果图片隐藏的 那么不强制加载
				if(_config.skip_invisible && !$('img').is(":visible")) {
					return;
				}
				if (self._abovethetop(item) ||
					self._leftofbegin(item)) {
						// 什么都不处理
				} else if (self._belowthefold(item) &&
					self._belowthefold(item)) {
						self._eachImg(item);
				} 
			})
			
		 }else...