<!--<!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>
青旅半醒
分手后的思念是犯贱
亦凉
还没有评论，来说两句吧...