图片懒加载插件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <! DOCTYPE html> < html > < head > < meta charset="utf-8"> < title >利用图片延迟加载来优化页面性能(jQuery)</ title > < link rel="stylesheet" href="http://www.feelcss.com/public-css/reset.css"> < style type="text/css"> .page-info { padding:8px 15px; background:#fcea9e; border-bottom:1px solid #b6bac0; font:normal 16px Georgia; } .page-info h1 { float:left; } .page-info a { font-weight:bold; color:#222; } .return-article { float:right; } .return-article h2{ display:inline; } body{ height:2700px; } .a1{ margin:40px; width:1000px; background:#e6e6e6; } </ style > </ head > < body > < div class="page-info clearfix"> < h1 >< a href="http://www.feelcss.com" title="回到 Hey@feelcss 首页">Hey@feelcss</ a ></ h1 > < div class="return-article">返回文章:< h2 >< a href="http://www.feelcss.com/picture-lazy-loading-to-optimize-page-performance.html" title="利用图片延迟加载来优化页面性能(jQuery)">利用图片延迟加载来优化页面性能(jQuery)</ a ></ h2 ></ div > </ div > < script type="text/javascript"> for(var i=0; i< 40 ; i++){ document.write("<p style='color:#999;font-size:12px;'>【请往下拉动滚动条】</ p >"); } </ script > < div class="a1"> < img class="lazyLoading" data-url="http://www.feelcss.com/demo/picture-lazy-loading/022051.42796807.jpg"> < noscript >< img src="http://www.feelcss.com/demo/picture-lazy-loading/022051.42796807.jpg">替换方案</ noscript > </ div > < div class="a1"> < img class="lazyLoading" data-url="http://www.feelcss.com/demo/picture-lazy-loading/141500.94376871.jpg"> < noscript >< img src="http://www.feelcss.com/demo/picture-lazy-loading/141500.94376871.jpg">替换方案</ noscript > </ div > < div class="a1"> < img class="lazyLoading" data-url="http://www.feelcss.com/demo/picture-lazy-loading/085825.73643922.jpg"> < noscript >< img src="http://www.feelcss.com/demo/picture-lazy-loading/085825.73643922.jpg">替换方案</ noscript > </ div > < div class="a1"> < img class="lazyLoading" data-url="http://www.feelcss.com/demo/picture-lazy-loading/022652.83797841.jpg"> < noscript >< img src="http://www.feelcss.com/demo/picture-lazy-loading/022652.83797841.jpg">替换方案</ noscript > </ div > < div class="a1"> < img class="lazyLoading" data-url="http://www.feelcss.com/demo/picture-lazy-loading/090002.79394226.jpg"> < noscript >< img src="http://www.feelcss.com/demo/picture-lazy-loading/090002.79394226.jpg">替换方案</ noscript > </ div > < script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></ script > < script type="text/javascript" src="http://www.feelcss.com/demo/picture-lazy-loading/jquery.imgLazyLoading.js"></ script > < script type="text/javascript"> $(".lazyLoading").imgLazyLoading({ url : "data-url", fadeIn : 400 }); </ script > </ body > </ html > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | /* * 基于jQuery的图片延迟加载插件 * by Hey@feelcss (http://www.feelcss.com/) */ ;( function ($){ $.fn.imgLazyLoading = function (options){ //定义需要的参数的初始值,并合并options对象到set对象 var set = $.extend({ url : "data-url" , fadeIn : 0 }, options || {}); var cache = []; $( this ).each( function (){ var nodeName = this .nodeName.toLowerCase(); var url = $( this ).attr(set.url); //获取每个元素的信息 var data = { obj : $( this ), url : url, tag : nodeName } cache.push(data); }); var lazyLoading = function (){ $.each(cache, function (i, e){ var obj = e.obj, url = e.url, tag = e.tag; if (obj){ var winHeight = $(window).height(); //当前窗口高度 var scrolltop = $(window).scrollTop(); //滚动条偏移高度 var oTop = obj.offset().top; //图片相对高度 //判断是否在当前窗口内 if ((oTop-scrolltop) > 0 && (oTop-scrolltop) < winHeight){ if (tag === "img" ){ if (set.fadeIn){ //渐出效果 obj.fadeIn(set.fadeIn); } //给src属性赋值 obj.attr( "src" , url); } else { return false ; } e.obj = null ; } } }); } //加载后立即执行 lazyLoading(); //执行滚动,触发事件 $(window).bind( "scroll" , lazyLoading); }; })(jQuery); |
看完demo感觉不错,先整过来再说
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)