网站上有很多图片的时候就会加载速度很慢(如果3S内首页打不开,已经算是死亡页面)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片延迟加载/懒加载</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: 微软雅黑; font-size: 14px; } .banner { margin: 10px auto; width: 790px; height: 800px; border: 1px solid green; background: url(http://oucm2v3sy.bkt.clouddn.com/%E9%A4%90%E9%A5%AE.png) no-repeat center center #e1e1e1; } .banner img { display: none; width: 100%; height: 100%; } </style> </head> <body> <div class="banner"> <img id="jd" trueImg=" http://oucm2v3sy.bkt.clouddn.com/01.png" src="" alt=""> </div> <script> window.onload = function () { var banner = document.getElementById('banner'); var jd = document.getElementById('jd'); jd.src = jd.getAttribute('trueImg'); jd.onload = function () { jd.trueImg = ''; jd.style.display = 'block'; } jd.onerror = function(){ console.log('error'); } } </script> </body> </html>