滚动加载图片

标签：滚动加载图片

做了一个粗糙的滚动加载图片例子，先分享一下,后续不断完善。

基本功能是这样的：

1.页面一共有7层，每一层可以认为是不同类型的商品；

2，页面初始化时，只加载第一层的图片和数据等；

3，滚动时，动态加载图片；（一层一层的加载）

4，如果已经加载过的层，不再加载。

样式：

	    * {
	    	margin: 0px;
	    	padding: 0px;
	    }
		body {
			background: rgb(250, 222, 222);
		}
		.container {
			width: 95%;
			margin: 0 auto;
			min-height: 4000px;
			background: rgb(236, 236, 236);
		}
		.first_floor {
			background: rgb(251, 246, 172);
			text-align: center
		}
		.second_floor {
			background: rgb(193, 249, 199);
			text-align: center
		}
		.third_floor {
			background: rgb(207, 207, 207);
			text-align: center
		}
		.forth_floor,.firth_floor,.sirth_floor,.seventh_floor {
			text-align: center
		}
		.imgContainer {
			display: inline-block;
			margin: 5px;
		}
		.floor_title {
			height: 30px;
			line-height: 30px;
			text-align: left;
			border-bottom: 2px solid rgb(252, 1, 248);
			margin: 5px;
		}

HTML代码：

<div class="container">
  			<div class="first_floor">
  				
  			</div>
  			<div class="second_floor">
  				
  			</div>
  			<div class="third_floor">
  				
  			</div>
  			<div class="forth_floor">
  				
  			</div>
  			<div class="firth_floor">
  				
  			</div>
  			<div class="sirth_floor">
  				
  			</div>
  			<div class="seventh_floor">
  				
  			</div>

  		</div>

js相关：

简单的处理了一下事件委托addEventListener和attachEvent的东东：

	    	function addEvent(type, handler, bubble) {
		    	if (window.addEventListener) {
		    		window.addEventListener(type, handler, bubble);
		    	} else {
		    		window.attachEvent("on" + type, handler, bubble);
		    	}
	    	}

注意attachEvent注册时，第一个参数加“on”；

获取每一层的图片和数据：

/*
	    	这个地方只是实例，获取数据或者图片路径方式，也可以使发请求从后台
	    	 */
	    	function loadImage(floorDom, id) {
	    		//如果某一层已经加载过了直接返回
	    		if (floorDom.innerHTML && floorDom.innerHTML.trim()) {
	    			return;
	    		}
	    		var altStr = "加载失败";//加载失败时
	    		var imgStr = id ? "./img/"+ id +".png" : "img/1.png";
	    		var title = "欢迎选购第" + id +"层的商品"; 
	    		//每一层的title
	    		var tilteHtmlStr = "<div class=‘floor_title‘><h4>" + title + "</h4></div>";
	    		//每一层的内容
	    		var contentHtmlStr = "<div class=‘floor_content‘>" +
	    		"<div class=‘imgContainer‘><img class=‘imgWrap‘ src=‘"+ imgStr +"‘ alt=‘" + altStr + "‘ title=‘" + imgStr + "‘></img></div>"
	    		 + "<div class=‘imgContainer‘><img class=‘imgWrap‘ src=‘"+ imgStr +"‘ alt=‘" + altStr + "‘ title=‘" + imgStr + "‘></img></div>" 
	    		 + "<div class=‘imgContainer‘><img class=‘imgWrap‘ src=‘"+ imgStr +"‘ alt=‘" + altStr + "‘ title=‘" + imgStr + "‘></img></div>" 
	    		 + "<div class=‘imgContainer‘><img class=‘imgWrap‘ src=‘"+ imgStr +"‘ alt=‘" + altStr + "‘ title=‘" + imgStr + "‘></img></div>"
	    		 + "<div class=‘imgContainer‘><img class=‘imgWrap‘ src=‘"+ imgStr +"‘ alt=‘" + altStr + "‘ title=‘" + imgStr + "‘></img></div>"
	    		 + "<div class=‘imgContainer‘><img class=‘imgWrap‘ src=‘"+ imgStr +"‘ alt=‘" + altStr + "‘ title=‘" + imgStr + "‘></img></div>"
	    		 + "<div class=‘imgContainer‘><img class=‘imgWrap‘ src=‘"+ imgStr +"‘ alt=‘" + altStr + "‘ title=‘" + imgStr + "‘></img></div>"
	    		 + "<div class=‘imgContainer‘><img class=‘imgWrap‘ src=‘"+ imgStr +"‘ alt=‘" + altStr + "‘ title=‘" + imgStr + "‘></img></div>"
	    		 + "</div>";
	    		floorDom.innerHTML = tilteHtmlStr + contentHtmlStr;
	    	}

拼接好后，一次innerHTML,避免多次重排和重绘。需要注意的是，如果某一层innerHTML已经有数据和图片了，不用再次获取图片，重绘该区域。

滚动事件处理函数：

function scrollHandler(event) {
	    		var scrollTopValue = document.body.scrollTop;
	    		if (document.documentElement.scrollTop) {
	    			scrollTopValue = document.documentElement.scrollTop;
	    		}
	    		//如果滚动的距离小于最大的滚动懂距离，说明已经加载过了
	    		if (scrollTopValue < MaxScrollValue) {
	    			return;
	    		}
	    		if (scrollTopValue >= 0 && scrollTopValue < 563) {
	    			loadImage(secondDom, 2);
	    		} else if (scrollTopValue >= 563 && scrollTopValue <= 563*2) {
	    			loadImage(thirdtDom, 3);
	    		} else if (scrollTopValue >= 563*2 && scrollTopValue <= 563*3) {
	    			loadImage(forthDom, 4);
	    		} else if (scrollTopValue >= 563*3 && scrollTopValue <= 563*4) {
	    			loadImage(firthDom, 5);
	    		} else if (scrollTopValue >= 563*4 && scrollTopValue <= 563*5) {
	    			loadImage(sirthDom, 6);
	    		} else {
	    			loadImage(seventhDom, 7);
	    		}
	    		MaxScrollValue = scrollTopValue;
	    		console.log("scrollHandler:" + MaxScrollValue);
	    	}

上面的if else分支有待改善，其实可以用二分的形式，分割条件一次，然后每一个分支再细化，效果会高一些（详情请看《高性能javascript》）。

最后：

   addEvent("scroll", scrollHandler, false);
    var doc = document;
    var firstDom = doc.querySelector(".first_floor");
    var secondDom = doc.querySelector(".second_floor");
    var thirdtDom = doc.querySelector(".third_floor");
    var forthDom = doc.querySelector(".forth_floor");
    var firthDom = doc.querySelector(".firth_floor");
    var sirthDom = doc.querySelector(".sirth_floor");
    var seventhDom = doc.querySelector(".seventh_floor");
    loadImage(firstDom, 1);

好了，这样一个很挫的滚动加载就成了。效果如下图：

本文出自 “shuizhongyue” 博客，请务必保留此出处http://shuizhongyue.blog.51cto.com/7439523/1673583

滚动加载图片

标签：滚动加载图片

原文地址：http://shuizhongyue.blog.51cto.com/7439523/1673583