文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web开发中如何使用图片懒加载插件

2024-04-02 19:55

关注

这篇文章主要介绍了web开发中如何使用图片懒加载插件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

示例


 var throttle = function (fn, delay, mustRunDelay) {
 var timer; //使用闭包存储timer
 var t_start;
 //闭包返回的函数
 return function (val) {
 var args = arguments, t_curr = +new Date(); //使用+new Date() 将字符串转换成数字
 clearTimeout(timer);
 if (!t_start) { // 使用!t_start 如果t_start=undefined或者null 则为true
 t_start = t_curr;
 }
 if (t_curr - t_start >= mustRunDelay) {
 fn.apply(null, args);
 t_start = t_curr;
 } else {
 timer = setTimeout(function () {
  fn.apply(null, args);
 }, delay);
 }
 }
 };
 
 var throttle1 = throttle(fn, 500, 4000);
 //在该需要调用的函数内部调用此函数
 throttle1(val); //此处传人的参数为以上fn需要传人的参数

至于函数节流具体的好处,常用的场景,以下文章说得非常清楚,我就不再说啦~

很多网站都会用到‘图片懒加载'这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片。于是心血来潮,决定自己手动写一下'图片懒加载‘插件。

使用这个技术有什么显著的优点?

比如一个页面中有很多图片,如淘宝首页等等,一个页面有100多的图片,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的头部又依赖这个js文件,那就不好办了。用户感觉这个页面就会很卡。

懒加载原理:浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。

当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成loading图片地址(这样就只需请求一次)

等到一定条件(这里是页面滚动到一定区域),用实际存放img地址的laze-load属性的值去替换src属性,即可实现'懒加载'。

//即使img的src值为空,浏览器也会对服务器发送请求。所以平时做项目的时候,如果img没有用到src,就不要出现src这个属性

先上三个重要的知识点

1.获取屏幕可视窗口大小:

document.documentElement.clientHeight 标准浏览器及低版本IE标准模式

document.body.clientHeight 低版本混杂模式

2.元素相对于文档document顶部

element.offsetTop

3.滚动条滚动的距离

document.documentElement.scrollTop   兼容ie低版本的标准模式

document.body.scrollTop 兼容混杂模式;

滚动加载:当图片出现在可视区域时,动态加载该图片。

原理:当图片元素顶部是否在可视区域内,(图片相对于文档document顶部-滚动条滚动的距离)< 可视窗口大小,改变该img的src属性 

实现原理:

1.首先从所有相关元素中找出需要延时加载的元素,放在element_obj数组中。

function initElementMap() {
 var el = document.getElementsByTagName('img');
 for (var j = 0, len2 = el.length; j < len2; j++) {
 //判断当前的img是否加载过了,或者有lazy_src标志 [未完成]
 if (typeof (el[j].getAttribute("lazy_src"))) {
 element_obj.push(el[j]);
 download_count++;
 }
 }
 }

2.判断数组中的img对象,若满足条件,则改变src属性

function lazy() {
 if (!download_count) return;
 var innerHeight = getViewport();
 for (var i = 0, len = element_obj.length; i < len; i++) {
//得到图片相对document的距上距离
 var t_index = getElementViewTop(element_obj[i]); 
 if (t_index - getScrollTop() < innerHeight) {
 element_obj[i].src = element_obj[i].getAttribute("lazy-src");
 delete element_obj[i];
 download_count--;
 }
 }
}

3.滚动的时候触发事件,1000毫秒后执行lazy()方法。

 window.onscroll = window.onload = function () {
 setTimeout(function () {
 lazy();
 }, 1000)
 }

整部分代码位于闭包自执行函数中。相应的方法放在init中。

var lazyLoad = (function () { 
 function init() {
 initElementMap();
 lazy();
 };
 return {
 init: init 
 }
})();

使用格式 :src填默认loading图片地址,真实的图片地址填在lazy-src属性里,切记需指定宽高。在外部调用  lazyLoad.init();

感谢你能够认真阅读完这篇文章,希望小编分享的“web开发中如何使用图片懒加载插件”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯