आलसी लोडिंग छवियाँ - सीएसएस-ट्रिक्स

अद्यतन: यह बहुत पुराना है। यदि आप इन दिनों आलसी चित्रों को देख रहे हैं, तो मैं आपको देखने की सलाह दूंगा:

• आलसी लोडिंग छवियों के लिए पूरी गाइड
• वेब प्लेटफ़ॉर्म के लिए एक मूल निवासी आलसी लोड
• अपनी खुद की आलसी लोडिंग को रोल करने के लिए टिप्स

एक का उपयोग करें 5699899/lazy_loading_images_css-tricks.gifके रूप में srcछवियों की, और शामिल widthऔर heightअंतिम छवि की।

/* lazyload.js (c) Lorenzo Giuliani * MIT License (http://www.opensource.org/licenses/mit-license.html) * * expects a list of: * `` */ !function(window)( var $q = function(q, res)( if (document.querySelectorAll) ( res = document.querySelectorAll(q); ) else ( var d=document , a=d.styleSheets(0) || d.createStyleSheet(); a.addRule(q,'f:b'); for(var l=d.all,b=0,c=(),f=l.length;b  = 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) ) ) var images = new Array() , query = $q('img.lazy') , processScroll = function()( for (var i = 0; i < images.length; i++) ( if (elementInViewport(images(i))) ( loadImage(images(i), function () ( images.splice(i, i); )); ) ); ) ; // Array.prototype.slice.call is not callable under our lovely IE8 for (var i = 0; i < query.length; i++) ( images.push(query(i)); ); processScroll(); addEventListener('scroll',processScroll); )(this); 

CodePen
पर क्रिस कॉयर (@chriscoyier) द्वारा पेन आलसी लोडिंग इमेज देखें ।