本篇文章给大家带来的内容是关于懒加载实现的方法有哪些？（三种方法介绍），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
优势
性能收益：浏览器加载图片、decode、渲染都需要耗费资源，懒加载能节约性能消耗，缩短onload事件时间。
节约带宽：这个不需要解释。
通常，我们在html中展示图片，会有两种方式：
img 标签
css background-image
img的懒加载实现img有两种方式实现懒加载：
事件监听(scroll、resize、orientationchange)
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>event</title> <style> img { background: #f1f1fa; width: 400px; height: 300px; display: block; margin: 10px auto; border: 0; } </style></head><body> <img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" /> <img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" /> <img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" /> --> <img class="lazy" src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image5.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image6.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image7.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image8.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image9.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-400,h-300" /> <script> document.addeventlistener(domcontentloaded, function() { var lazyloadimages = document.queryselectorall(img.lazy); var lazyloadthrottletimeout; function lazyload () { if(lazyloadthrottletimeout) { cleartimeout(lazyloadthrottletimeout); } lazyloadthrottletimeout = settimeout(function() { var scrolltop = window.pageyoffset; lazyloadimages.foreach(function(img) { if(img.offsettop < (window.innerheight + scrolltop)) { img.src = img.dataset.src; img.classlist.remove('lazy'); } }); if(lazyloadimages.length == 0) { document.removeeventlistener("scroll", lazyload); window.removeeventlistener("resize", lazyload); window.removeeventlistener("orientationchange", lazyload); } }, 20); } document.addeventlistener("scroll", lazyload); window.addeventlistener("resize", lazyload); window.addeventlistener("orientationchange", lazyload); }); </script></body></html>
intersection observer（兼容性问题）
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>observer</title> <style> img { background: #f1f1fa; width: 400px; height: 300px; display: block; margin: 10px auto; border: 0; } </style></head><body> <img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" /> <img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" /> --> <img class="lazy" src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image5.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image6.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image7.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image8.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image9.jpeg?tr=w-400,h-300" /> <img class="lazy" src="https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-400,h-300" /> <script> document.addeventlistener(domcontentloaded, function() { var lazyloadimages = document.queryselectorall(.lazy); var imageobserver = new intersectionobserver(function(entries, observer) { entries.foreach(function(entry) { if (entry.isintersecting) { var image = entry.target; image.src = image.dataset.src; image.classlist.remove(lazy); imageobserver.unobserve(image); } }); }); lazyloadimages.foreach(function(image) { imageobserver.observe(image); }); }); </script></body></html>
background-image的实现background-image的实现跟img的原理基本是一样的，区别是在对class的处理上：
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>background</title> <style> body { margin: 0; } .bg { height: 200px; } #bg-image.lazy { background-image: none; background-color: #f1f1fa; } #bg-image { background-image: url(https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300); background-size: 100%; } </style></head><body> <p id="bg-image" class="bg lazy"></p> <p id="bg-image" class="bg lazy"></p> <p id="bg-image" class="bg lazy"></p> <p id="bg-image" class="bg lazy"></p> <p id="bg-image" class="bg lazy"></p> <p id="bg-image" class="bg lazy"></p> <p id="bg-image" class="bg lazy"></p> <p id="bg-image" class="bg lazy"></p> <script> document.addeventlistener(domcontentloaded, function() { var lazyloadimages = document.queryselectorall(.lazy); var imageobserver = new intersectionobserver(function(entries, observer) { entries.foreach(function(entry) { if (entry.isintersecting) { var image = entry.target; image.classlist.remove(lazy); imageobserver.unobserve(image); } }); }); lazyloadimages.foreach(function(image) { imageobserver.observe(image); }); }); </script></body></html>
渐进式懒加载渐进式懒加载，指的是存在降级处理，通常html形式如下：
<a href="full.jpg" class="progressive replace"> <img src="tiny.jpg" class="preview" alt="image" /></a>
这样的代码会有2个好处：
如果js执行失败，可以点击预览
大小与实际图一致的占位data uri，避免reflow
最终的代码如下：
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>progressive</title> <style> a.progressive { position: relative; display: block; overflow: hidden; outline: none; } a.progressive:not(.replace) { cursor: default; } a.progressive img { display: block; width: 100%; max-width: none; height: auto; border: 0 none; } a.progressive img.preview { filter: blur(2vw); transform: scale(1.05); } a.progressive img.reveal { position: absolute; left: 0; top: 0; will-change: transform, opacity; animation: reveal 1s ease-out; } @keyframes reveal { 0% {transform: scale(1.05); opacity: 0;} 100% {transform: scale(1); opacity: 1;} } </style></head><body> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature5.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature5.jpg 800w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature5big.jpg 1600w" class="progressive replace"> <img src="data:image/jpeg;base64,/9j/4aaqskzjrgabaqeayabgaad//ga7q1jfqvrpujogz2qtanblzyb2ms4wich1c2luzybjskcgslbfryb2njiplcbxdwfsaxr5id0gnzak/9saqwakbwcibwykcagicwokcw4yea4ndq4dfryrgcmfjsqihyihjis3lyypnckhijbbmtq5oz4+piuureldpeg3pt47/9saqwekcwsodq4cebacoygikds7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7/8aaeqgabqauaweiaairaqmraf/eab8aaaefaqebaqebaaaaaaaaaaabagmebqyhcakkc//ealuqaaibawmcbamfbqqeaaabfqecawaeequsitfbbhnryqcicrqygzghccncscevuthwjdnicoijchyxgbkajsynkckqndu2nzg5okneruzhselku1rvvldywvpjzgvmz2hpann0dxz3ehl6g4sfhoeiiyqsk5svlpeymzqio6slpqeoqaqys7s1tre4ubrcw8tfxsfiycrs09tv1tfy2drh4upk5ebn6onq8flz9px29/j5+v/eab8baambaqebaqebaqeaaaaaaaabagmebqyhcakkc//ealuraaibagqeawqhbqqeaaecdwabagmrbauhmqysqvehyxetijkbcbrckagxwqkjm1lwfwjy0qowjdthjfexgbkajicokso1njc4otpdrevgr0hjslnuvvzxwflay2rlzmdoawpzdhv2d3h5eokdhiwgh4ijipktljwwl5izmqkjpkwmp6ipqrkztlw2t7i5usldxmxgx8jjytlt1nxw19jz2ulj5oxm5+jp6vlz9px29/j5+v/aaawdaqaceqmrad8a5yc3e2s3gm7oeqhdga57vtulapquoauk7ym7r2bpsiivs5vn8stjmk2ldgvm3lyshg7bxk0uuv4skk2jdn2p/9k=" class="preview" alt="palm trees" /> </a> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature2.jpg" class="progressive replace"> <img src="http://lorempixel.com/20/15/nature/2/" class="preview" alt="sunset" /> </a> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature3.jpg" class="progressive replace"> <img src="http://lorempixel.com/20/15/nature/3/" class="preview" alt="tide" /> </a> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature5.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature5.jpg 800w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature5big.jpg 1600w" class="progressive replace"> <img src="data:image/jpeg;base64,/9j/4aaqskzjrgabaqeayabgaad//ga7q1jfqvrpujogz2qtanblzyb2ms4wich1c2luzybjskcgslbfryb2njiplcbxdwfsaxr5id0gnzak/9saqwakbwcibwykcagicwokcw4yea4ndq4dfryrgcmfjsqihyihjis3lyypnckhijbbmtq5oz4+piuureldpeg3pt47/9saqwekcwsodq4cebacoygikds7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7ozs7/8aaeqgabqauaweiaairaqmraf/eab8aaaefaqebaqebaaaaaaaaaaabagmebqyhcakkc//ealuqaaibawmcbamfbqqeaaabfqecawaeequsitfbbhnryqcicrqygzghccncscevuthwjdnicoijchyxgbkajsynkckqndu2nzg5okneruzhselku1rvvldywvpjzgvmz2hpann0dxz3ehl6g4sfhoeiiyqsk5svlpeymzqio6slpqeoqaqys7s1tre4ubrcw8tfxsfiycrs09tv1tfy2drh4upk5ebn6onq8flz9px29/j5+v/eab8baambaqebaqebaqeaaaaaaaabagmebqyhcakkc//ealuraaibagqeawqhbqqeaaecdwabagmrbauhmqysqvehyxetijkbcbrckagxwqkjm1lwfwjy0qowjdthjfexgbkajicokso1njc4otpdrevgr0hjslnuvvzxwflay2rlzmdoawpzdhv2d3h5eokdhiwgh4ijipktljwwl5izmqkjpkwmp6ipqrkztlw2t7i5usldxmxgx8jjytlt1nxw19jz2ulj5oxm5+jp6vlz9px29/j5+v/aaawdaqaceqmrad8a5yc3e2s3gm7oeqhdga57vtulapquoauk7ym7r2bpsiivs5vn8stjmk2ldgvm3lyshg7bxk0uuv4skk2jdn2p/9k=" class="preview" alt="palm trees" /> </a> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature2.jpg" class="progressive replace"> <img src="http://lorempixel.com/20/15/nature/2/" class="preview" alt="sunset" /> </a> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/nature3.jpg" class="progressive replace"> <img src="http://lorempixel.com/20/15/nature/3/" class="preview" alt="tide" /> </a> <script> window.addeventlistener('load', function() { var pitem = document.getelementsbyclassname('progressive replace'), timer; window.addeventlistener('scroll', scroller, false); window.addeventlistener('resize', scroller, false); inview(); function scroller(e) { timer = timer || settimeout(function() { timer = null; requestanimationframe(inview); }, 300); } function inview() { var scrolltop = window.pageyoffset; var innerheight = window.innerheight; var p = 0; while (p < pitem.length) { var offsettop = pitem[p].offsettop; if (offsettop < (scrolltop + innerheight)) { loadfullimage(pitem[p]); pitem[p].classlist.remove('replace'); } else p++; } } function loadfullimage(item) { var img = new image(); if (item.dataset) { img.srcset = item.dataset.srcset || ''; img.sizes = item.dataset.sizes || ''; } img.src = item.href; img.classname = 'reveal'; if (img.complete) addimg(); else img.onload = addimg; function addimg() { item.addeventlistener('click', function(e) { e.preventdefault(); }, false); item.appendchild(img).addeventlistener('animationend', function(e) { var pimg = item.queryselector('img.preview'); if (pimg) { e.target.alt = pimg.alt || ''; item.removechild(pimg); e.target.classlist.remove('reveal'); } }); } } }, false); </script></body></html>
现成库推荐下面这个库，使用非常简单：https://www.npmjs.com/package/lozad
以上就是懒加载实现的方法有哪些？（三种方法介绍）的详细内容。