js和jquery懒加载之可视区域加载

懒加载

在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，系统的价值也因此会大打折扣。因此，提高系统响应速度，是非常重要的。

Web应用程序做的最多就是和后台数据库交互，而查询数据库是种非常耗时的过程。当数据库里记录过多时，查询优化更显得尤为重要。为了解决这种问题，有人提出了缓存的概念。缓存就是将用户频繁使用的数据放在内存中以便快速访问。在用户执行一次查询操作后，查询的记录会放在缓存中。当用户再次查询时，系统会首先从缓存中读取，如果缓存中没有，再查询数据库。缓存技术在一定程度上提升了系统性能，但是当数据量过大时，缓存就不太合适了。因为内存容量有限，把过多的数据放在内存中，会影响电脑性能。而另一种技术，懒加载可以解决这种问题。

技术简介

懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

在什么情况下使用懒加载

涉及到图片，falsh资源，iframe，网页编辑器(CK)，JS文件 等占用较大带宽，避免网页打开时加载过多资源，让用户等待太久。

使用懒加载的一种思想

在使用懒加载的时候，我们有时候想给用户一种延迟加载的现象，以达到视觉上的冲击感

1.给图片设置一张默认的图片

2.在滑动屏幕的时候，在有数据图片的时候替换默认图片

3.效果渲染  在这里就要使用jquery.lazyload.js

实例

html中

<img haoroomslazyload="Chrysanthemum.jpg" src="1.png" >
    <img haoroomslazyload="Desert.jpg" src="" >
    <img haoroomslazyload="Hydrangeas.jpg" src="1.png" >
    <img haoroomslazyload="Koala.jpg" src="" >
    <img haoroomslazyload="Lighthouse.jpg" src="" >
    <img haoroomslazyload="Penguins.jpg" src="" >
    <img haoroomslazyload="Tulips.jpg" src="" >

script中

var l=0
//js方法翻译版
$(window).bind("scroll", function(event){

                for(var i=l;i<$("img").length;i++){
                    if($("img").eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())){
                        if($("img").eq(i).attr("src") == ""||$("img").eq(i).attr("src")=="./images/1.png"){
                            var lazyloadsrc=$('img').eq(i).attr("haoroomslazyload");
                            $("img").eq(i).attr("src",lazyloadsrc);

 				$("img").lazyload({ threshold : 200 });
                        }
                    }
                    if($("img").eq(i).offset().top  > parseInt($(window).height()) + parseInt($(window).scrollTop())){
                        l=i;
                        break;
                    }
                }

 });