<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>图片懒加载-简单</title> <script src="js/jquery-3.0.0.min.js"></script> <style> ul,li{ list-style:none; } .container{ width: 600px; margin: 0 auto; } .container li{ float: left; margin: 10px 10px; } .container li img{ width: 240px; height: 180px; } p{ float: left; } </style></head><body><ul class="container"> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" /></a></li> <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" /></a></li></ul>
<script> // 先进行一次检查 lazyRender(); //为了不在滚轮滚动过程中就一直判定，设置个setTimeout,等停止滚动后再去判定是否出现在视野中。 var clock; //这里的clock为timeID， $(window).on('scroll',function () {// lazyRender(); if (clock) { // 如果在300毫秒内进行scroll的话，都会被clearTimeout掉，setTimeout不会执行。 //如果有300毫秒外的操作，会得到一个新的timeID即clock，会执行一次setTimeout,然后保存这次setTimeout的ID， //对于300毫秒内的scroll事件，不会生成新的timeID值，所以会一直被clearTimeout掉，不会执行setTimeout. clearTimeout(clock); } clock = setTimeout(function () { console.log('运行了一次'); lazyRender(); },300) })
function lazyRender () { $('.container img').each(function () { if (checkShow($(this)) && !isLoaded($(this)) ){ loadImg($(this)); } }) } function checkShow($img) { // 传入一个img的jq对象 var scrollTop = $(window).scrollTop(); //即页面向上滚动的距离 var windowHeight = $(window).height(); // 浏览器自身的高度 var offsetTop = $img.offset().top; //目标标签img相对于document顶部的位置
if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的 return true; } return false; } function isLoaded ($img) { return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了 } function loadImg ($img) { $img.attr('src',$img.attr('data-src')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性 }</script></body></html>
转载于:https://www.cnblogs.com/James123/p/suntao1.html
相关资源：vue实现图片懒加载的方法分析