<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; } ul{ margin: 0; padding: 0; list-style: none; } img{ border: none; vertical-align: middle; } .in{ border: 1px solid black; margin: 10px; text-align: center; height: 400px; width: 400px; float: left; } .in img{ height: 400px; width: 400px; } </style> </head> <body> <ul class="list"> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li> </ul> <script> var oBtn = document.getElementsByTagName('button')[0]; var aImages = document.images; loadImg(aImages); window.onscroll = function(){ loadImg(aImages); }; function loadImg(arr){ for( var i = 0,len = arr.length; i < len; i++){ if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){ arr[i].isLoad = true; arr[i].style.cssText = "transition: ''; opacity: 0;" if(arr[i].dataset){ aftLoadImg(arr[i],arr[i].dataset.original); }else{ aftLoadImg(arr[i],arr[i].getAttribute("data-original")); } (function(i){ setTimeout(function(){ arr[i].style.cssText = "transition: 1s; opacity: 1;" },16) })(i); } } } function aftLoadImg(obj,url){ var oImg = new Image(); oImg.onload = function(){ obj.src = oImg.src; } oImg.src = url; } </script> </body> </html>
效果图:
相关推荐
echo.js图片懒加载插件
jquery.lazyload.js 图片懒加载 --demo
好用的图片懒加载库
图片懒加载所需js+css+内容,解决图片懒加载失效问题。
HTML图片懒加载,亲测可用,插件也比较小,使用起来挺方便的.根据jquery 提供的 lazyload.js 插件实现图片懒加载,demo 在最下面。 lazyLoading.js 可以缓解庞大项目的网络压力lazyLoading.js图片懒加载
应用lazyload.js 插件实现图片懒加载
图片懒加载文件jquery插件库EasyLazyload
这篇文章主要介绍了JS图片懒加载的优点及实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 图片懒加载优势: 增强用户体验 优化代码 减少http的请求 ...
图片懒加载判断图片是否滚动到视图内,使用jquery.lazyload.js插件,还得大于五十个字,真麻烦随便凑凑字吧,仅供参考
JQuery实现页面图片懒加载效果,两个文件放进去,只需加入两行代码即可实现。
原生javascript页面图片懒加载效果
echo.js图片懒加载,亲测可用,插件也比较小,使用起来挺方便的
Echo 是一个轻量的 JS 图片懒加载插件,不依赖其它库。特别适用于移动端需要加载大量图片的应用。使用方法,查看https://blog.csdn.net/qq_44952391/article/details/122477458?spm=1001.2014.3001.5502
js实现PC端移动端通用的图片懒加载.rar
这是一款jQuery图片懒加载代码,点击加载更多代码,点击加载更多图片js特效。
ionic图片懒加载的简单例子,用网上常用的两种js
完整的项目例子用两种js实现图片懒加载
本篇文章介绍了javascript图片懒加载与预加载的分析,详细的介绍了懒加载和预加载的问题,有需要的可以了解一下。