第一百五十六节,封装库--JavaScript,延迟加载
JavaScript封装 -- 加载 延迟
2023-09-14 08:58:24 时间
封装库--JavaScript,延迟加载
延迟加载的好处,就是在浏览器视窗外的图片,不加载,拖动鼠标到浏览器视窗内后加载,用户不看的图片就不用加载,可以减少服务器大量流量
将图片的src地址用一张统一的图片,这样初始化都加载这张图片,减少流量
将图片正真的连接地址用另外的属性赋值
当用户视窗高度加上滚动条高度,大于等于,图片头部与浏览器头部的距离时,将正真的连接地址,改变到src,
html
<!--延迟加载--> <div id="photo"> <dl> <dt><img xsrc="img/p1.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt> <dd>延迟加载图片</dd> </dl> <dl> <dt><img xsrc="img/p2.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt> <dd>延迟加载图片</dd> </dl> <dl> <dt><img xsrc="img/p3.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt> <dd>延迟加载图片</dd> </dl> <dl> <dt><img xsrc="img/p4.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt> <dd>延迟加载图片</dd> </dl> <dl> <dt><img xsrc="img/p5.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt> <dd>延迟加载图片</dd> </dl> </div>
css
/*延迟加载*/ #photo { width:900px; float:left; } #photo dl { width:225px; height:270px; float:left; margin:5px 0 15px 0; } #photo dl dt { width:200px; height:250px; margin:0 auto; } #photo dl dd { height:25px; line-height:25px; text-align:center; }
前台js
//延迟加载 var wait_load = $('.wait_load'); //获取所有的图片节点 wait_load.shzh_tou_ming_du(0); //将所有图片设置成透明 $(window).yuan_su_shi_jian('scroll',_wait_load); $(window).yuan_su_shi_jian('resize',_wait_load); function _wait_load() { setTimeout(function () { //延迟100毫秒 for (var i = 0; i < wait_load.jd_length(); i++) { //根据图片的长度来循环 var _this = wait_load.hq_jd(i); //获取到每次循环对应的图片对象 if(getInner().height + gun_dong_tiao_wei_zhi().top >= ju_li_liu_lan_qi_tou(_this)) { //判断视窗高度加上滚动条的高度,大于等于,元素头部到浏览器头部距离时 $(_this).qh_shu_xing_zhi('src', $(_this).qh_shu_xing_zhi('xsrc')).yi_dong_tou_ming({ //每次循环对应的图片改变src并显示出来 attr: 'o', target: 100, t: 30, step: 10 }); } } }, 100); }
首先要引入封装库
相关文章
- Win10系列:JavaScript综合实例1
- Win10系列:JavaScript小球运动示例
- JavaScript的陷阱
- Javascript Prototypes之旅(A Plain English Guide to JavaScript Prototypes译文)
- 第一百五十二节,封装库--JavaScript,表单验证--年月日注入
- 第一百五十一节,封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全
- 第一百四十八节,封装库--JavaScript,菜单切换
- 第一百三十九节,JavaScript,封装库--CSS选择器
- 第一百三十八节,JavaScript,封装库--插件
- 第一百三十四节,JavaScript,封装库--遮罩锁屏
- [Javascript] Use requestIdleCallback to schedule JavaScript tasks at an optimal time
- [Javascript] Await a JavaScript Promise in an async Function with the await Operator
- [Javascript] this in Function Calls
- [Javascript] Limit Built Branches on Travis
- [Javascript] What is JavaScript Function Currying?
- javascript时间戳和日期字符串相互转换
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain (Object.setPrototypeOf())
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] Identify and Deal with NaN in JavaScript
- [Javascript] Linting JavaScript with ESLint
- 【 华为OD机试 2023】 微服务的集成测试(C++ Java JavaScript Python)