主颜色延迟加载 – 有爱前端

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .background { width: 80vmin; height: calc(80vmin / 14 * 9); margin: 56px auto; box-shadow: 0 10px 75px -16px #000; } .background img.lazy { height: 100%; width: 100%; opacity: 0; transition: 1s; } .background img.lazy.loaded { opacity: 1; } </style> </head> <body> <div data-image="WpdHCafYSWjaguKSxPOjdbT1a/H0MfAAAAEElEQVQI12NgYGRiYGZhBQAALgAQ2bAGGQ" class="background"><img src="https://lh3.googleusercontent.com/-6UtNFOzr6Rk/V2pO8a32QNI/AAAAAAAAHXE/tc8SACAEqWo_IM0N85rUHlc-ThVs65LaQ/w2048-h1280/sierra-2.jpg" class="lazy"/></div> <div data-image="WeXlGlt8u7wc40QUtIYHNRR0wrG7TZAAAAEElEQVQI12NgYGRiYGZhBQAALgAQ2bAGGQ" class="background"><img src="http://ihdwallpapers.com/walls/2015/10/12/os_x_el_capitan_desktop-wide.jpg" class="lazy"/></div> <div data-image="X2xZnCkYJ4YXKqj3xTUVpKT15VjEr+AAAAEElEQVQI12NgYGRiYGZhBQAALgAQ2bAGGQ" class="background"><img src="https://www.hdwallpapers.net/wallpapers/yosemite-wallpaper-for-2880x1800-60-798.jpg" class="lazy"/></div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $('.background').each(function() { var $b64 = $(this).data("image"); $(this).css("background", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAMAAACqqpYoAAAAElBMVE" + $b64 + "AAAABJRU5ErkJggg==) center/cover no-repeat"); }); $('.lazy').each(function() { var $object = $(this), $parent = $object.parent(); $object.on('load', function() { $object.addClass('loaded'); $parent.removeAttr("data-image") setTimeout(function() { $parent.removeAttr("style"); }, 2000); }); }); </script> </html>

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

转载请注明：有爱前端 » 主颜色延迟加载