性能优化之懒加载

1、图片懒加载
原理：先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。

优点：这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。
实现：

    <div class="container">
        <img src="loading.gif" alt="1" data-src="http://.../img.png">
    </div>
            // 一开始没有滚动的时候，出现在视窗中的图片也会加载
            start();

            // 当页面开始滚动的时候，遍历图片，如果图片出现在视窗中，就加载图片
            var clock; //函数节流
            $(window).on('scroll',function(){
                if(clock){
                    clearTimeout(clock);
                }
                clock = setTimeout(function(){
                    start()
                },200)
            })
            
            function start(){
                 $('.container img').not('[data-isLoading]').each(function () {
                    if (isShow($(this))) {
                        loadImg($(this));
                    }
                })
            }

或者直接使用JQuery的Lazyload

<img src='../images/loading.png' data-original='http://.../img.png' width='600' height='300' >";
//ajax的complete里加入
$("img").lazyload();

2、条件加载，比如分页

//滚动条触底
$(window).scroll(function(){
	var scrollTop = ${this}.scrollTop();//滚动条与顶部的高度
	var curHeight = $(this).height()//滚动条高度
	var totalHeight = $(document).height()//页面总高度
	if(scrollTop + curHeight >= totalHeight ){
	//触底,ajax请求数据添加dom
	}
})