图片懒加载 亦凉 2022-05-23 12:19 484阅读 0赞 <!--<!doctype html>--> <!--<html lang="en">--> <!--<head>--> <!--<meta charset="UTF-8">--> <!--<meta name="viewport"--> <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">--> <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">--> <!--<title>Document</title>--> <!--<style>--> <!--.wrap{--> <!--width: 500px;--> <!--margin: 200px auto;--> <!--overflow:hidden;--> <!--}--> <!--.page{--> <!--height:600px;--> <!--background: red;--> <!--overflow:auto;--> <!--}--> <!--</style>--> <!--</head>--> <!--<body>--> <!--<div class="warp">--> <!--<div class="page">--> <!--<p><img src="img/loading.gif" data-src="img/1.jpg" alt=""></p>--> <!--<p><img src="img/loading.gif" data-src="img/2.jpg" alt=""></p>--> <!--<p><img src="img/loading.gif" data-src="img/3.jpg" alt=""></p>--> <!--<p><img src="img/loading.gif" data-src="img/4.jpg" alt=""></p>--> <!--<p><img src="img/loading.gif" data-src="img/5.jpg" alt=""></p>--> <!--<p><img src="img/loading.gif" data-src="img/6.jpg" alt=""></p>--> <!--<p><img src="img/loading.gif" data-src="img/7.jpg" alt=""></p>--> <!--<p><img src="img/loading.gif" data-src="img/8.jpg" alt=""></p>--> <!--<p><img src="img/loading.gif" data-src="img/9.jpg" alt=""></p>--> <!--</div>--> <!--</div>--> <!--<script>--> <!--var scrollElement=document.querySelector('.page')--> <!--viewH=document.documentElement.clientHeight;--> <!--function lazyload() {--> <!--var nodes=document.querySelectorAll('img[data-src]')--> <!--Array.prototype.forEach.call(nodes,function (item,index) {--> <!--var rect;--> <!--if(item.dataset.src=='') return;--> <!--rect=item.getBoundingClientRect();--> <!--if(rect.bottom >=0 && rect.top < viewH){--> <!--(function (item) {--> <!--var img=new Image();--> <!--img.onload=function () {--> <!--item.src=img.src;--> <!--}--> <!--img.src=item.dataset.src;--> <!--item.dataset.src=''--> <!--})(item)--> <!--}--> <!--})--> <!--}--> <!--lazyload();--> <!--scrollElement.addEventListener('scroll',throttle(lazyload,500,1000))--> <!--function throttle(fun,delay,time) {--> <!--var timeout,--> <!--startTime=new Date()--> <!--return function () {--> <!--var context=this,--> <!--args=arguments,--> <!--curTime=new Date();--> <!--clearTimeout(timeout);--> <!--if(curTime-startTime >= time){--> <!--fun.apply(context,args);--> <!--startTime=curTime;--> <!--}else {--> <!--timeout=setTimeout(fun,delay);--> <!--}--> <!--}--> <!--}--> <!--</script>--> <!--</body>--> <!--</html>--> <!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/1.jpg"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.jpg"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.jpg"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.jpg"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.jpg"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.jpg"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.jpg"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.jpg"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.jpg"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.jpg"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.jpg"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.jpg"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.jpg"></li> <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.jpg"></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> <!--<head>--> <!--<meta charset="UTF-8">--> <!--<title>Document</title>--> <!--<style>--> <!--img {--> <!--display: block;--> <!--margin-bottom: 50px;--> <!--width: 400px;--> <!--height: 400px;--> <!--}--> <!--</style>--> <!--</head>--> <!--<body>--> <!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">--> <!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">--> <!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">--> <!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">--> <!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">--> <!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">--> <!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">--> <!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">--> <!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">--> <!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">--> <!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">--> <!--<script>--> <!--var num = document.getElementsByTagName('img').length;--> <!--var img = document.getElementsByTagName("img");--> <!--var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历--> <!--lazyload(); //页面载入完毕加载可是区域内的图片--> <!--window.onscroll = lazyload;--> <!--function lazyload() { //监听页面滚动事件--> <!--var seeHeight = document.documentElement.clientHeight; //可见区域高度--> <!--var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度--> <!--for (var i = n; i < num; i++) {--> <!--if (img[i].offsetTop < seeHeight + scrollTop) {--> <!--if (img[i].getAttribute("src") == "default.jpg") {--> <!--img[i].src = img[i].getAttribute("data-src");--> <!--}--> <!--n = i + 1;--> <!--}--> <!--}--> <!--}--> <!--function throttle(fun, delay, time) {--> <!--var timeout,--> <!--startTime = new Date();--> <!--return function() {--> <!--var context = this,--> <!--args = arguments,--> <!--curTime = new Date();--> <!--clearTimeout(timeout);--> <!--// 如果达到了规定的触发时间间隔，触发 handler--> <!--if (curTime - startTime >= time) {--> <!--fun.apply(context, args);--> <!--startTime = curTime;--> <!--// 没达到触发间隔，重新设定定时器--> <!--} else {--> <!--timeout = setTimeout(fun, delay);--> <!--}--> <!--};--> <!--};--> <!--// 实际想绑定在 scroll 事件上的 handler--> <!--function lazyload(event) {}--> <!--// 采用了节流函数--> <!--window.addEventListener('scroll',throttle(lazyload,500,1000));--> <!--</script>--> <!--</body>--> </html>
相关 图片懒加载 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmds 青旅半醒/ 2022年11月16日 13:41/ 0 赞/ 322 阅读
相关 图片懒加载 function lazyLoadImg() { var img = document.getElementsByTagName('img'); s 谁践踏了优雅/ 2022年09月28日 13:05/ 0 赞/ 385 阅读
相关 图片懒加载 在一个项目中，如果同时加载的图片太多的话，会导致页面卡顿，这个时候就会用到懒加载。懒加载的实现原理是监听浏览器的滚动条事件，先加载出前面几张图片，然后当滚动条滚动的时候再依次加 分手后的思念是犯贱/ 2022年06月17日 13:49/ 0 赞/ 167 阅读
相关 图片懒加载 1.引入js jquery.lazyload.js(如下) / Lazy Load - jQuery plugin for lazy loading 缺乏、安全感/ 2022年06月16日 06:44/ 0 赞/ 485 阅读
相关 图片懒加载 懒加载的意义[（在线demo预览）][demo] 尽管很多公司的网页都有一些限制，比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等，但是 痛定思痛。/ 2022年06月04日 07:58/ 0 赞/ 526 阅读
相关 图片懒加载 在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度， 偏执的太偏执、/ 2022年05月28日 02:07/ 0 赞/ 549 阅读
相关 图片懒加载 <!--<!doctype html>--> <!--<html lang="en">--> <!--<head>--> <!--<me 亦凉/ 2022年05月23日 12:19/ 0 赞/ 485 阅读
相关 图片懒加载 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> r囧r小猫/ 2022年05月21日 06:54/ 0 赞/ 528 阅读
相关 图片懒加载 \[外链图片转存失败(img-vbwUXXxJ-1563574134995)([https://upload-images.jianshu.io/upload\_images/ 川长思鸟来/ 2021年09月30日 00:24/ 0 赞/ 844 阅读
青旅半醒
分手后的思念是犯贱
亦凉
还没有评论，来说两句吧...