简单几句JavaScript代码实现图片延迟加载并淡入淡出显示效果

http://www.webhek.com/lazyload-image-fade
对于一个网站，最占用带宽，最影响页面显示速度的东西就是图片。图片是很重要的，有时是必须的，作为一个站长，我们是千方百计的使用各种技巧来优化图片，我们可以使用 ImageOptim 或 TinyPNG 来消减图片体积，或用 data URIs 和小图片来提升图片加载速度。如果一个页面上图片太大，或图片太多，无法消减，我们有另外一个方法来提升用户的页面显示体验，那就是延迟加载(lazy load)。之前我们介绍过使用 Lazy Load jQuery 插件。但其实还有一种更简单的方法，只需要几行代码，就能达到这种效果。同时，还附加一种淡入淡出的显示效果。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片延迟加载</title> <style type="text/css"> img { opacity: 1; transition: opacity 0.3s; } img[data-src] { opacity: 0; } </style> </head> <body> <a href="http://mote.xcabc.com/ModelAlbum/1696"><img data-src="http://img2.xcabc.com/201604/22/20160422053540026863.jpg" alt=""></a> <p>sdfsdf</p> <script type="text/javascript"> [].forEach.call(document.querySelectorAll('img[data-src]'), function(img) { img.setAttribute('src', img.getAttribute('data-src')); img.onload = function() { img.removeAttribute('data-src'); }; }); </script> </body> </html>

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

相比起其它各种的图片延迟加载技术，这种方法非常的简单，它几乎不要求其它任何条件，可以用在任何地方，使用起来非常灵活。

当然，简单有简单的好坏，也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术，还是要看场景而定。

转载请注明：有爱前端 » 简单几句JavaScript代码实现图片延迟加载并淡入淡出显示效果