图片延迟加载 – 有爱前端

https://css-tricks.com/snippets/javascript/lazy-loading-images/

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>图片延迟加载</title> <style type="text/css"> body { margin: 0; padding: 0; } img{display: block;margin: 0 auto;} </style> </head> <body> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201710/26/20171026104527306921.png"> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201710/26/20171026104530969480.png"> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201710/26/20171026104531560930.png"> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201710/26/20171026104534773167.png"> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201710/26/20171026104535521579.png"> <script type="text/javascript"> /* lazyload.js (c) Lorenzo Giuliani * MIT License (http://www.opensource.org/licenses/mit-license.html) * * expects a list of: * `<img src="blank.gif" data-src="my_image.png" width="600" height="400" class="lazy">` */ ! 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 < f; b++) l[b].currentStyle.f && c.push(l[b]); a.removeRule(0); res = c; } return res; }, addEventListener = function(evt, fn) { window.addEventListener ? this.addEventListener(evt, fn, false) : (window.attachEvent) ? this.attachEvent('on' + evt, fn) : this['on' + evt] = fn; }, _has = function(obj, key) { return Object.prototype.hasOwnProperty.call(obj, key); }; function loadImage(el, fn) { var img = new Image(), src = el.getAttribute('data-src'); img.onload = function() { if (!!el.parent) el.parent.replaceChild(img, el) else el.src = src; fn ? fn() : null; } img.src = src; } function elementInViewport(el) { var rect = el.getBoundingClientRect() return ( rect.top >= 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); </script> </body> </html>

提示：你可以先修改部分代码再运行。

滚动到位置加载

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>滚动到位置加载</title> <style type="text/css"> body { margin: 0; padding: 0; } img{display: block;margin: 0 auto;transition: all .3s;transform: rotateX(90deg);} img.active{transform: rotateX(0);} </style> </head> <body> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201710/26/20171026104527306921.png"> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201710/26/20171026104530969480.png"> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201710/26/20171026104531560930.png"> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201710/26/20171026104534773167.png"> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201710/26/20171026104535521579.png"> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201707/07/20170707012520817833.jpg"> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201707/07/20170707012527626369.jpg"> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201707/07/20170707012528415914.jpg"> <img src="http://xs.gzui.net/img/bookcover/我的老千生涯.jpg" class="lazy" data-src="http://img2.xcabc.com/201711/22/20171122105859520908.jpg"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="http://img.gzui.net/js/appear.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('.lazy').appear(function(){ var imgsrc = $(this).attr('data-src'); console.log(imgsrc); $(this).attr('src',imgsrc).addClass('active'); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 图片延迟加载