非首屏图片延时加载

目标

  减少资源加载可以明显的优化页面加载的速度,所以可以减少页面载入时立即下载的图片的数量,以提高页面加载速度,其他的图片在需要的时候再进行加载。

思路

  想要实现以上的目标,有几个地方需要思考。

  1、如何判断哪些图片需要立即加载,哪些可以晚些再加载?

  2、如何控制图片在指定的时候加载?

  

  对于第一个问题,页面打开就会被用户看到的图片肯定需要立即加载,其他的可以延后。即在视窗中的图片需要立即加载。那么如何判断图片是否在视窗内呢?getBoundingClientRect可以返回元素的大小及其相对于视口的位置(详细说明)

  

  可以通过图中top和right的值判断图片是否在视窗中。

  对于第二个问题,先不给img指定src,而是将图片链接地址存放再元素的data-src属性(自定义)中,需要加载的时候再赋值给src,才会开始下载图片。

实现

  思路有了,我们开始实现。用以下HTML进行测试

  

HTML
  <div class="container"><h1>图片懒加载</h1><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><img src="" alt="" class="lazy-img" data-src="http://c.hiphotos.baidu.com/zhidao/pic/item/1f178a82b9014a909461e9baa1773912b31bee5e.jpg"><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><img src="" alt="" class="lazy-img" data-src="http://img2.niutuku.com/desk/1208/1718/ntk-1718-66531.jpg"><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><img src="" alt="" class="lazy-img" data-src="http://2t.5068.com/uploads/allimg/151105/48-151105112944-51.jpg"><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><img src="" alt="" class="lazy-img" data-src="http://img2.niutuku.com/desk/anime/4654/4654-4708.jpg"><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><img src="" alt="" class="lazy-img" data-src="http://img2.niutuku.com/desk/1208/1721/ntk-1721-66572.jpg"><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p><p>测试性配文,测试图片懒加载</p></div>

  html中链接都来自百度图片,可在network中观察是否加载,这里忽略样式。按照之前的思路,有以下代码

      //所有的图片var imgs = document.querySelectorAll('.lazy-img');//首屏图片加载
      lazyLoad(imgs)//剩余图片加载---监听滚动事件window.addEventListener('scroll',function(){//滚动事件触发太频繁了,所以加上节流throttle(lazyLoad(imgs),200,500)})}

  下面就是如何实现lazyLoad

    function lazyLoad(imgs,offset){offset = offset || 100;if (!imgs || imgs.length < 1) {console.log('imgs为空');return ;}[].slice.call(imgs).forEach(function(element,index){//元素的DomRectvar rect = element.getBoundingClientRect()//出现在视窗中if (rect.top <= window.innerHeight   offset && rect.right > 0) {element.setAttribute('src',element.getAttribute('data-src'))}})}

  通过window.innerHeight获取到视窗的高度,当元素距离视窗上边沿为offset时,加载图片;其中offset为指定的偏移距离。

  节流函数如下

    function throttle (fn, delay, atleast) {let timer = nulllet startTime = new Date()return function () {let context = thislet args = argumentslet curTime = new Date()clearTimeout(timer)if (curTime - startTime >= atleast) {fn.apply(context, args)   // apply 指定函数指向的 上下文(this) 和 参数列表startTime = curTime} else {timer = setTimeout(function () {fn.apply(context, args)startTime = curTime}, delay)}}}

效果

  页面载入完成,只加载了一张图片

  

  向下滚动到指定位置,才会依次加载后续图片

 

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361316.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

具有链接资源的Spring RestTemplate

Spring Data REST是一个了不起的项目&#xff0c;它提供了一些机制来将基于Spring Data的存储库中的资源公开为REST资源。 使用链接资源公开服务 考虑两个简单的基于JPA的实体&#xff0c;课程和教师&#xff1a; Entity Table(name "teachers") public class Tea…

用户会话,数据控件和AM池

最近&#xff0c;有人问我有关应用程序模块池的有趣问题。 众所周知&#xff0c;AM池包含用户会话引用的应用程序模块实例&#xff0c;这允许会话在后续请求时从池中获取完全相同的AM实例。 如果应用程序中有多个根应用程序模块&#xff0c;那么每个模块都将拥有自己的AM池&am…

用 CSS 实现元素垂直居中,有哪些好的方案?

DIV居中的经典方法 1. 实现DIV水平居中 设置DIV的宽高&#xff0c;使用margin设置边距0 auto&#xff0c;CSS自动算出左右边距&#xff0c;使得DIV居中。 1 div{ 2 width: 100px; 3 height: 100px; 4 margin: 0 auto; 5 } 缺点&#xff1a;需要设置div的宽度 2.…

使用wss和HTTPS / TLS保护WebSocket的安全

是这个博客的第50条提示&#xff0c;是的&#xff01; 技术提示&#xff03;49说明了如何使用用户名/密码和Servlet安全机制保护WebSocket的安全。 本技术提示将说明如何在WildFly上使用HTTPS / TLS保护WebSocket。 让我们开始吧&#xff01; 创建一个新的密钥库&#xff1a…

Java性能调优调查结果(第二部分)

这是系列文章的第二篇&#xff0c;我们将分析2014年10月进行的性能调整调查的结果。如果您尚未阅读第一部分&#xff0c;我们建议从此处开始 。 第二部分将重点监视Java应用程序的性能问题。 特别是&#xff0c;我们尝试回答以下问题&#xff1a; 人们如何发现性能问题&#x…

简单的css缩放动画,仿腾讯新闻的分享按钮和美团app底部的图标样式

最近看到一些好看的hover的图形缩放效果。然后自己就写了下&#xff0c;发现这2种效果都不错。如果伙伴们更好的实现方式可以在下面留言哦~ 还有美团的效果&#xff0c;我就不展示了&#xff0c;喜欢的可以去app应用上看看。 这两种效果&#xff0c;其实实现的原理是一样的&…

Java性能调优调查结果(第一部分)

我们在2014年10月进行了Java性能调优调查。该调查的主要目的是收集对Java性能世界的见解&#xff0c;以改进Plumbr产品。 但是&#xff0c;我们也很高兴与您分享有趣的结果。 我们收集的数据为进行冗长的分析提供了素材&#xff0c;因此我们决定将结果划分为一系列博客文章。 这…

asp.net ViewState详解

ViewState是一个被误解很深的动物了。我希望通过此文章来澄清人们对ViewState的一些错误认识。为了达到这个目的&#xff0c;我决定从头到尾详细的描述一下整个ViewState的工作机制&#xff0c;其中我会同时用一些例子说明我文章中的观点&#xff0c;结论。比如我会用静态控件(…

windows下命令行修改系统时间;修改系统时间的软件

找了很久,都没有找到,还找了关键词 dos下修改系统时间 因为看到linux下修改系统时间是用hwclock 命令写入主板芯片. 而我由于某些原因想自动化修改系统时间,所以找windows下修改系统时间的软件 没有找到. 有一个 意天禁止修改系统时间开发包(系统时间保护组件) 1.0.0.1 ,可以禁…

如何摆脱JavaFX中的重点突出显示

今天&#xff0c;有人问我是否知道摆脱JavaFX控件&#xff08;分别是按钮&#xff09;的焦点突出的方法&#xff1a; 有关此问题的大多数文章和提示建议添加&#xff1a; .button:focused {-fx-focus-color: transparent; }但是使用这种样式&#xff0c;仍然会留下这样的光芒…

Android工具HierarchyViewer 代码导读(3) -- 后台代码

在上文中&#xff0c;我们讲解了如何把HierarchyViewer的项目导入到Eclipse中&#xff0c;以便更高效阅读代码。本文将讲解HierarchyViewer的后台代码&#xff0c;建议大家可以先阅读<Android工具HierarchyViewer代码导读(1) -- 功能实现演示>一文, 其中的代码演示了Hier…

阿里巴巴使命、愿景、价值观、绩效管理中的六大价值观、

阿里巴巴的使命 让天下没有难做的生意 阿里巴巴的愿景 分享数据的第一平台幸福指数最高的企业“活102年”阿里巴巴的价值观 我们坚持“客户第一、员工第二、股东第三”。 阿里巴巴的六脉神剑&#xff08;绩效管理中的六大价值观&#xff09; 公司的“六脉神剑” 客户第一&#…

在命令行上操作JAR,WAR和EAR

尽管Java IDE和许多图形工具使查看和操作Java归档文件&#xff08;JAR&#xff0c;WAR和EAR&#xff09;文件的内容比以往更加容易&#xff0c;但有时我还是更喜欢使用命令行jar命令来完成这些任务。 当我必须重复做某事或作为脚本的一部分来做时&#xff0c;尤其如此。 在本文…

C#语言使用多态(接口与override) ——帮您剔除对面向对象多态性的疑惑

多态是面向对象编程中三大机制之一,其原理建立在"从父类继承而来的子类可以转换为其父类"这个规则之上,换句话说,能用父类的地方,就能用该类的子类.当从父类派生了很多子类时,由于每个子类都有其不同的代码实现,所以当用父类来引用这些子类时,同样的操作而可以表现出…

ASP.NET MVC的生命周期与网址路由

网址路由&#xff08;Routing&#xff09;在ASP.NET MVC中有两个主要用途&#xff0c;一个用途是匹配通过浏览器传来的HTTP请求&#xff0c;另一个用途则是将适当的网址返回浏览器。 首先我们来看下第一个用途&#xff0c;也就是匹配通过浏览器传来的HTTP请求。 客户端对ASP.NE…

Android中SQLiteDatabase操作【附源码】

像我们做的很多应用程序及网站一样&#xff0c;基本都是对数据库进行增删改查来实现相应的功能。那么Android开发也一样&#xff0c;不过由于在移动客户端应用&#xff0c;所以不会像sql server、mysql那么复杂&#xff0c;Android应用程序支持本地数据库&#xff0c;SQLiteDat…

【BEV感知算法概述——下一代自动驾驶感知算法】

文章目录 BEV感知算法概念BEV感知算法数据集介绍BEV感知算法分类BEV感知算法的优劣小结 BEV感知算法概念 Bird’s-Eye-View&#xff0c;鸟瞰图&#xff08;俯视图&#xff09;。BEV感知算法存在许多的优势。 首先&#xff0c;BEV视图存在遮挡小的优点&#xff0c;由于视觉的透…

博客园CodingLife模板样式优化

博客园CodingLife模板样式优化&#xff0c;小屏和大屏均做了优化&#xff0c;感兴趣的园友可以复制到你的页面定制CSS代码中&#xff0c; 源码地址&#xff1a;http://www.cnblogs.com/blog/customcss/334547.css 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

WPF控件和布局

WPF控件和布局&#xff0c;根据刘铁猛《深入浅出WPF》书籍讲解内容&#xff0c;主要记录控件和布局的原理&#xff0c;如果有不足的地方&#xff0c;请大牛们键盘下留情--轻喷&#xff01;如果还算有用&#xff0c;请给点动力&#xff0c;支持一把&#xff01; 一、WPF里的控件…

Oracle ——概述 Oracle 5 步调优方法论

http://www.toadworld.com/KNOWLEDGE/KnowledgeXpertforOracle/tabid/648/TopicID/OPS3/Default.aspx 对 Oracle 调优应该采取积极的态度。如果等到用户开始抱怨性能&#xff0c;才调优通常以为时已晚&#xff0c;即便是最有效的调优策略。性能问题确定和处理的时间越晚&#x…