首页 > 代码库 > 简易版图片预加载效果
简易版图片预加载效果
图片预加载效果
<!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‘//只实现了预加载的效果 图片渐渐显示出来的 }); });
简易版图片预加载效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。