js图片预加载

Question

类似淘宝的图片预加载是怎样实现的啊，
只有当滚动到相应的位置时该位置的图片加载进来

Answer 1

var imgPath="";new Image().src=imgPath; // 预加载/********************
     * 取窗口滚动条滚动高度 
     ******************/
 function __getScrollTop()
    {
       return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
    };
function croll()
{ 
    var scrollTop = __getScrollTop();
    if(scrollTop>=要显示图片的top)
    {
设置图片.src=imgPath;
       }
}(function(){
if(window.addEventListener){
           window.addEventListener('scroll', function(e){ croll(); },false); 
        }else{
           window.attachEvent("onscroll",function(){ croll();});       
        }
 })();

Answer 2

lazyload

Answer 3

你那叫延迟加载，概念相反。
预加载是指你在当前页面内鼠标移动到某个小图时，能够立即显示预加载的大图片，减少临时下载大图片的等待时间。
延迟加载则正象你后面说的，是一种把页面后方一屏看不到的内容暂时不加载，等用户向下滚动想看时才再加载，以加快第一屏的显示速度。延迟加载的原理就是对页面的onScroll事件进行监听，检查与设定一个的变量，比如theforever的值是否大于或等于，这个值是在第一屏显示时存放的，用于指示当window.scrollTop达到什么值（就是用户向下拖动到什么位置）时加载后面需要加载的图片，然后每次在scroll事件中与theforever比对发现达到条件时，用一个AJAX请求把theforever发送给后台，后台通过它的值，就知道这次应该返回哪些图片，并把下一次需要加载的位置信息一同返回，AJAX接收到之后，将图片和位置信息拆分开，加载图片，同时把位置信息更新到theforever变量里。也可以不用AJAX临时取图片，而是在第一次返回页面时把所有没有加载的图片写入一个JS数组里，然后每次直接从这个数组中截取一部分赋给后面的显示部分的INNERHTML。