JS实现非首屏图片延迟加载的示例

目标

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

思路

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

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

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

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

 

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

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

实现

思路有了,我们开始实现。用以下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){
 //元素的DomRect
 var 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 = null
 let startTime = new Date()

 return function () {
 let context = this
 let args = arguments
 let 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)
 }
 }
 }

效果

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

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

以上这篇JS实现非首屏图片延迟加载的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • js前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载. 思路: 将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src. 关于各种宽高: 页可见区域宽: document.body.clien

  • Javascript之图片的延迟加载的实例详解

    Javascript之图片的延迟加载的实例详解 作用:保证页面打开的速度(3s之内打不开页面,就已经算是死亡页面了) 原理: 1)对于首屏内容中的图片:首先给对应的区域一张默认图片占着位置(默认图片需要非常小,一般可以维持在5kb以内),当首屏内容都加载完成后(或者也可以给一个延迟时间),再开始加载真实图片 2)对于其他屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片 扩展:数据的异步加载:开始只把前两屏的数据加载绑定出来,后面的数据不进行处理,当页面

  • js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果

    本文为大家分享了js实现延迟加载思想和首屏延迟加载的具体代码,供大家参考,具体内容如下 作用:保证页面打开的速度(3s之内如果首页打不开就已经算是死亡页面了) 原理: 1).对于首屏内容中的图片:首先给对应的区域一张默认图片占的位置(默认图需要非常的小,一般可以维持在5kb以内),当首屏内容都加载完成后(或者也可以给一个延迟的时间),我在开始加载真实的图片 2).对于其他屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片 扩展:数据的异步加载,开始只把前

  • JS实现非首屏图片延迟加载的示例

    目标 减少资源加载可以明显的优化页面加载的速度,所以可以减少页面载入时立即下载的图片的数量,以提高页面加载速度,其他的图片在需要的时候再进行加载. 思路 想要实现以上的目标,有几个地方需要思考. 1.如何判断哪些图片需要立即加载,哪些可以晚些再加载? 2.如何控制图片在指定的时候加载? 对于第一个问题,页面打开就会被用户看到的图片肯定需要立即加载,其他的可以延后.即在视窗中的图片需要立即加载.那么如何判断图片是否在视窗内呢?getBoundingClientRect可以返回元素的大小及其相对于视

  • Js逆向实现滑动验证码图片还原的示例代码

    本文列举两个例子:某象和某验的滑动验证 一.某验:aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s 未还原图像: 还原后的图: 从服务端请求来的图片是打乱后的,给用户看的时候是完整的,这个过程肯定是运行了某段js代码,将打乱的图片进行还原操作.所以我们需要找到这段js,然后还原它的代码逻辑,实现图片的还原操作,找到缺口距离,实现滑动操作. 如果你仔细观察的话,你会发现还原后的图它是canvas生成出来的 那你应该会想到,那段

  • JS前端首屏优化技巧

    目录 引言 打包分析 路由懒加载 vue.config.js 修改 productionSourceMap 为 false 首屏请求优化 图片压缩 配置使用 CDN 方式引入资源库 公共代码抽离 开启 gzip 压缩 其他优化 引言 前段时间领导突然找到我,说新项目的访问怎么变得这么慢,我立马访问对应页面,果然,首页加载8.9s,这近10s的等待时间,对于用户来说,无疑是痛苦的.于是乎领导就把这个首页加载优化的任务交给我了. 在经过我的一顿折腾后,首屏加载时间基本都在2s左右,这样的首屏加载时间

  • JS实现图片延迟加载并淡入淡出效果的简单方法

    话不多说,直接看示例 首先是图片标记的写法 <img data-src="/images/image.jpg" alt=""> 需要将图片的地址放到 data-src 属性里,而src值不需要,直接将src属性去掉. CSS代码 所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节: img { opacity: 1; transition: opacity 0.3s; } img[data-src] { opacity:

  • js简单实现图片延迟加载的方法

    本文实例讲述了js简单实现图片延迟加载的方法.分享给大家供大家参考,具体如下: window.onload=window.onresize=window.onscroll=function() { showImg(); }; function getPos(obj) { var l=0; var t=0; while(obj) { l+=obj.offsetLeft; t+=obj.offsetTop; obj=obj.offsetParent; } return {left: l, top:

  • js图片延迟加载的实现方法及思路

    大概的实现方式是:在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片.然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来.这里比较麻烦地方是,如何计算img的位置,获得元素的相对于页面的绝对位置.通常是用offsetLeft和offsetTo

  • JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】

    本文实例讲述了JS图片延迟加载插件LazyImgv1.0用法.分享给大家供大家参考,具体如下: 注:LazyImg 必须定义lazy-data属性,属性值是src的图片路径 引入JS文件: <script type="text/javascript" src="js/lazyImg.v1.0.js"></script> 默认情况下: 在IMG中满足以任何一个条件,都会加载图片: 1.没有class属性 2.如果有class属性并且属性中不包含

  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法

    最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 复制代码 代码如下: //载入JavaScript 文件<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></sc

  • jquery.lazyload 实现图片延迟加载jquery插件

    什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compil

随机推荐