图片懒加载简单实现
试一试图片的懒加载 直接上demo
简单的jq实现图片懒加载
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片懒加载的实现</title> <style type="text/css"> *{ margin:0; padding:0; } .content{ width:1200px; margin: 0 auto; text-align:center; } div{ overflow: hidden; } ul li{ list-style: none; min-width:230px; height:300px; margin-left:5px; margin-top:5px; float:left; border:2px solid hotpink; text-align: center; line-height: 300px; } a{ text-decoration: none; display: block; } </style> <script src="js/jquery-1.11.3.js" ></script> <script> $(function(){
// 添加监听事件 window.addEventListener('scroll', _delay, false);function _delay() { clearTimeout(delay); var delay = setTimeout(function () { _loadImage(); }, 20); } function _loadImage(){ var b = $('.m-lazyload'); for(var i = 0; i < b.length; b++){ var _this = b.eq(i) //判断img位置 改变img 的src 其中1000 没有的话 基本上就要在浏览器窗口的顶部加载 if($(window).scrollTop()>( _this.offset().top + _this.outerHeight() - 1000)){ var s = _this.attr('data-src') _this.attr('src',s);
//img src 加载完 就去除class 防止重复加载 _this.removeClass('m-lazyload'); } }
//当所有图片加载完成之后 if(b.length == 0){
//图片全部加载完成 清除监听事件 window.removeEventListener('scroll', _delay, false); } } }) </script> </head> <body> <div class="content"> <h1>这里测试图片懒加载的实现</h1> <div class="num1"> <ul> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> </ul> </div> <div class="num2"> <ul> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> </ul> </div> <div class="num3"> <ul> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> </ul> </div> <div class="num1=4"> <ul> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img class="m-lazyload" data-src="img/2.jpg"/></a></li> </ul> </div> </div> </body> </html>
