javascript - 简单实现一个图片延迟加载的jQuery插件
最近在看一本书《Third-Party Javascript》很不错,推荐给大家,下载地址各位自己搜索了。
步骤:
1.打开google,鉴于google基本打不开,那么就打开这个网址吧。http://www.aol.com
2.搜索third party javascript filetype:pdf 一般都可以下载到电子书了。目前只有英文版。
这书中有一章讲到了提高app的效率,其中有一点就是延迟加载初始化不需要的资源,结合书中给出的部分代码,我这里简单的弄了一个jQuery的插件。
首先是js代码jquery.lazyloading.js。
1 /** 2 * @author huangjacky 3 * @date 2014-10-14 4 * @version 1.0 5 * @email huangjacky@163.com 6 * @description 7 */ 8 'use strict'; 9 (function ($) { 10 $.fn.extend({ 11 lazyloading: function (opt) { 12 var defaults = { 13 delay: 0 14 }; 15 var self = this; 16 var options = $.extend(defaults, opt); 17 var getWindowInfo = function () { 18 if ("pageYOffset" in window) { 19 return { 20 x: window.pageXOffset, 21 y: window.pageYOffset, 22 w: window.innerWidth, 23 h: window.innerHeight 24 } 25 } else { 26 var el = document.documentElement; 27 return { 28 x: el.scrollLeft, 29 y: el.scrollTop, 30 w: el.clientWidth, 31 h: el.clientHeight 32 } 33 } 34 35 }; 36 var check = function () { 37 var t = getWindowInfo(); 38 self.each(function (idx) { 39 var $this = $(this); 40 var left = 0; 41 var top = 0; 42 var el = this; 43 while (el && el.offsetParent) { 44 left += el.offsetLeft; 45 top += el.offsetTop; 46 el = el.offsetParent; 47 } 48 if ( 49 left > t.x && left < t.x + t.w && 50 top > t.y && top < t.y + t.h 51 ) {//开始正式加载 52 var href = $this.data("href"); 53 if ($this.is("img")) { 54 if (options.delay > 0) { 55 setTimeout(function () { 56 $this.attr("src", href); 57 }, options.delay); 58 } else { 59 $this.attr("src", href); 60 } 61 } else if ($this.is("div")) { 62 if (options.delay > 0) { 63 setTimeout(function () { 64 $this.load(href); 65 }, options.delay); 66 } else { 67 $this.load(href); 68 } 69 } 70 } 71 }); 72 }; 73 $(window).on("scroll", function (evt) { 74 check(); 75 }); 76 check(); 77 } 78 }); 79 })(jQuery);
JS的代码并不难,主要是绑定window的onScroll事件,然后遍历判断所选择的元素是否在界面范围内。
接下来看看怎么使用,lazy.html的代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/jquery-2.1.0.js"></script> 7 <script src="js/jquery.lazyloading.js"></script> 8 <style> 9 .my-block { 10 height: 500px; 11 width: 100%; 12 } 13 14 .red { 15 background-color: red; 16 } 17 18 .blue { 19 background-color: blue; 20 } 21 22 img { 23 width: 100px; 24 height: 100px; 25 border: 1px solid red; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="my-block red"></div> 31 <div class="my-block blue"></div> 32 <div class="my-block red"></div> 33 <img src="#" data-href="images/logo.png"> 34 <script> 35 $("img").lazyloading(); 36 </script> 37 </body> 38 </html>
是不是很简单?这样图片默认显示src的内容,只有滚动到它的时候才会显示data-href中定义的图片。
代码中还有很多逻辑没有实现,各位见谅。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥