图片预加载效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片预加载的简单效果</title> <style> body{ font-size:14px; } ul{ width:500px; height:auto; padding:0px; margin:0px; margin:0 auto;} ul li{ float:left; margin:10px; width:200px; list-style:none; height:300px;} ul li img{ width:200px; height:300px;} </style> <script src="jquery-1.10.1.min.js"></script> <script src="lazyLoad.js"></script> </head> <body> <ul> <li><a href=""><img src="pic/gray.jpg" data-src="pic/1.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/3.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/4.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/2.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/3.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/3.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/2.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/1.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/3.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/4.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/2.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/1.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/3.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/4.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/4.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/3.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/2.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/4.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/5.jpg" alt="" /></a></li> <li><a href=""><img src="pic/gray.jpg" data-src="pic/1.jpg" alt="" /></a></li> </ul> </body> </html>
js代码
(function($,window,document,undefined){ function LazyLoad(ele,opt){ this.$ele = ele; this.defaults = { 'efect':'fade' } this.settings = $.extend({},this.defaults,opt); } LazyLoad.prototype = { 'init':function(){ this.lazyImg(); this.scr(); }, 'lazyImg':function(){ var _this = this; return this.$ele.each(function(index, element) { if($(this).data('btn')) return; var iH = $(window).scrollTop() + $(window).innerHeight(); //alert(iH); var objImg = new Image(); var That = $(this); objImg.src = $(this).attr('data-src'); if(($(this).offset().top + $(this).height())<iH){ if(_this.settings.efect=='fade'){ $(this).css('opacity',0); $(this).attr('src',$(this).attr('data-src')); $(this).fadeTo('fast',1); }else{ $(this).attr('src',$(this).attr('data-src')); } $(this).data('btn','true') } }); }, 'scr':function(){ var _this = this; $(window).on('scroll',function(){ _this.lazyImg(); }); } } $.fn.lazyload = function(options){ var lazyLoad = new LazyLoad(this,options); return lazyLoad.init(); } })(jQuery,window,document);
代码调用
$(function(){ $('li img').lazyload({ 'efect':'fade'//只实现了预加载的效果 图片渐渐显示出来的 }); });