如何在用户滚动图像时仅加载图像

当用户向下滚动到页面足够远以实际看到它们时，许多站点似乎仅下载图像或生成文档的一部分（例如用于评论）。

这显然可以为您提供更快的加载页面，并为任何不打算向下滚动的人节省带宽。

如何完成，理想情况下使用jquery？ 或者换一种方式，如何检测到丢失的图像刚刚滚动到视图中并需要获取？

Answer 1

有插件。 这是一个 ……

Answer 2

这是我自己的。 玩得开心。 （不需要jQuery！）

测试： IE 5.5 +，FF 2 +，Chrome，Opera 9.6+

用法：

1. 你的lazyloaded图像应该在thumb属性中有真正的src

2. 只需在内联或外部包含javascript文件即可。

3. 如果您不想在整个页面上使用它，您可以：

     LazyImg().destroy(); // stop global fetching LazyImg("watch-only-this-div"); 

   注意：当您包含文件时，已创建全局实例，请注意整个文档。 您需要先停止它并启动您自己的实例。

   4. 为预取设置自定义偏移量（应该提取图像的下方多远）

        // watch the whole document // prefetch offset: 300px LazyImg(document, 300); 

码：

 // // LAZY Loading Images // // Handles lazy loading of images in one or more targeted divs, // or in the entire page. It also keeps track of scrolling and // resizing events, and removes itself if the work is done. // // Licensed under the terms of the MIT license. // // (c) 2010 Balázs Galambosi // (function(){ // glocal variables var window = this, instances = {}, winH; // cross browser event handling function addEvent( el, type, fn ) { if ( window.addEventListener ) { el.addEventListener( type, fn, false ); } else if ( window.attachEvent ) { el.attachEvent( "on" + type, fn ); } else { var old = el["on" + type]; el["on" + type] = function() { old(); fn(); }; } } // cross browser event handling function removeEvent( el, type, fn ) { if ( window.removeEventListener ) { el.removeEventListener( type, fn, false ); } else if ( window.attachEvent ) { el.detachEvent( "on" + type, fn ); } } // cross browser window height function getWindowHeight() { if ( window.innerHeight ) { winH = window.innerHeight; } else if ( document.documentElement.clientHeight ) { winH = document.documentElement.clientHeight; } else if ( document.body && document.body.clientHeight ) { winH = document.body.clientHeight; } else { // fallback: winH = 10000; // just load all the images } return winH; } // getBoundingClientRect alternative function findPos(obj) { var top = 0; if (obj && obj.offsetParent) { do { top += obj.offsetTop || 0; top -= obj.scrollTop || 0; } while (obj = obj.offsetParent); // return { "top" : top }; } } // top position of an element var getTopPos = (function() { var dummy = document.createElement("div"); if ( dummy.getBoundingClientRect ) { return function( el ) { return el.$$top || el.getBoundingClientRect().top; }; } else { return function( el ) { return el.$$top || findPos( el ).top; }; } })(); // sorts images by their vertical positions function img_sort( a, b ) { return getTopPos( a ) - getTopPos( b ); } // let's just provide some interface // for the outside world var LazyImg = function( target, offset ) { var imgs, // images array (ordered) last, // last visible image (index) id, // id of the target element self; // this instance offset = offset || 200; // for prefetching if ( !target ) { target = document; id = "$document"; } else if ( typeof target === "string" ) { id = target; target = document.getElementById( target ); } else { id = target.id || "$undefined"; } // return if this instance already exists if ( instances[id] ) { return instances[id]; } // or make a new instance self = instances[id] = { // init & reset init: function() { imgs = null; last = 0; addEvent( window, "scroll", self.fetchImages ); self.fetchImages(); return this; }, destroy: function() { removeEvent( window, "scroll", self.fetchImages ); delete instances[id]; }, // fetches images, starting at last (index) fetchImages: function() { var img, temp, len, i; // still trying to get the target target = target || document.getElementById( id ); // if it's the first time // initialize images array if ( !imgs && target ) { temp = target.getElementsByTagName( "img" ); if ( temp.length ) { imgs = []; len = temp.length; } else return; // fill the array for sorting for ( i = 0; i < len; i++ ) { img = temp[i]; if ( img.nodeType === 1 && img.getAttribute("thumb") ) { // store them and cache current // positions for faster sorting img.$$top = getTopPos( img ); imgs.push( img ); } } imgs.sort( img_sort ); } // loop through the images while ( imgs[last] ) { img = imgs[last]; // delete cached position if ( img.$$top ) img.$$top = null; // check if the img is above the fold if ( getTopPos( img ) < winH + offset ) { // then change the src img.src = img.getAttribute("thumb"); last++; } else return; } // we've fetched the last image -> finished if ( last && last === imgs.length ) { self.destroy(); } } }; return self.init(); }; // initialize getWindowHeight(); addEvent( window, "load", LazyImg().fetchImages ); addEvent( window, "resize", getWindowHeight ); LazyImg(); window.LazyImg = LazyImg; }());