Home » Tags

懒加载

图片懒加载插件VueLazyload130存在bug及临时解决方法

先提炼下问题和需求吧，尽量简单描述问题并复现bug，毕竟优化图片后对网页加载速度有着非常明显的效果！而且图片懒加载技术也是大家经常用到的一种优化手段。 问题：在练手的Vue项目中，首页在首次加载时图片请求数达到了60！如图： 理想状态/需求：优化首屏首次打开时加载图片的数量如图： 寻找解决方案：在Vue资源列表中搜索后发现目前声望最高的是vue-lazyload。 踩坑之路： 于是我下载了vue-lazyload@1.3.0最新版本，但并没有实现预期效果而是翻了车！后来改用@1.2.6版本才解决问题。对比@1.2.6和@1.3.0的代码后发现，将@1.2.6版本中的key: "checkInView"这个方法替换掉@1.3.0版本中的即可解决问题。如图： 最后，为了让文章更有说明力，证明不是我的操作问题，特意录制了一段视频，完整的演示了在项目中使用vue-lazyload@1.2.6和vue-lazyload@1.3.0后的区别，并修改vue-lazyload@1.3.0中的源码以解决bug. 视频演示bug复现全屏播放--视频演示vue-lazyload@1.3.0版本会加载所有图片而@1.2.6版本是正确的 最后，如果看官目前正在使用vue-lazyload@1.3.0版本，请注意这个坑。至于解决方案，文章中提到了两种，要么回退版本，要么修改源码。或者直接升级到1.3.1版本，刚去看了下，作者已经更新了版本。 今天中午的时候，原插件作者已确认了bug，详情访问：v1.3.0Bug求证：v-lazy会加载超出可视区域内的图片？ #372 如果看官有兴趣的话，可以阅读完整文章，详情访问：Vue2x优化篇之图片懒加载插件Vue-Lazyload@1.3.0存在bug及临时解决方法

June 29, 2019 · 1 min · jiezi

前端性能优化总结

记录性能优化相关的知识。 Chrome DevTools — Network DOMContentLoaded： DOM树构建完成的时间Load: 页面加载完毕。即DOM树构建完成后，加载完图片等外部资源的时间Finish: 是页面上所有 HTTP 请求发送到响应完成的时间 Waterfall根据 HTTP 请求的不同阶段来进行排序 Start Time：请求开始的时间Response Time：资源开始下载的时间End Time：请求结束的时间Total Duration：请求整个完整过程的时间Latency 请求等待响应的时间 如下图所示，Waterfall 右键之后选择 Total Duration，则请求按照整个持续时间排序，不同的颜色代表不同的资源文件，浅色的部分代表资源的等待时间，深色的部分代表下载时间。 懒加载一、为什么要用懒加载？ 二、懒加载的实现原理首先，将图片的地址放在其它属性(data-url)中，而不是 src。页面加载时根据 scrollTop 的值判断图片是否在可视区域,如果在可视区域，则将 data-url 属性中的值取出存放到src属性中（首屏的图片可以直接加载）。在滚动过程中，判断图片是否在可视区域，如果在，则将 data-url 属性中的值放到 src 属性中。图片优化图片优化的几种方式： CSS Sprite 和 BASE64 的对比 各个类型图片的对比 延迟加载第三方 JSdefer 属性：渲染 DOM 的过程将和 JS 脚本加载的过程异步进行，但是 JS 脚本的执行要在所有元素解析完成之后（只适用于外部脚本文件）async 属性：加载和渲染 DOM 的过程将和 JS 脚本的加载与执行的过程异步进行（只适用于外部脚本文件）defer 按照加载顺序执行脚本文件，async 则不会按照声明顺序执行具体区别见下图： 绿色线代表 HTML 解析；蓝色线代表 JS 脚本读取时间；红色线代表 JS 脚本执行时间。 ...

May 27, 2019 · 1 min · jiezi

用惰性加载优化-React-程序????

翻译：疯狂的技术宅原文：https://medium.freecodecamp.o... 本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章 惰性加载是一种优化 Web 应用和移动应用的旧技术。非常直截了当 —— 如果在某一时刻资源没有被查看或需要，就不要渲染它们。例如，如果我们有一个要显示的文章列表，开始时应该只渲染视口上的内容。这意味着其他元素将在以后按需呈现（当它们位于视口中或即将在视口上时）。 为什么要用懒惰性载？大多数时候，我们的用户看不到整个网页，至少在开始时是这样。无论我们的程序 UI 如何构建，用户最初甚至永远都不需要某些组件！ 在这些情况下，渲染这些组件不仅会消耗我们程序的性能，还会浪费大量资源（特别是当它们有图片或类似的内容时）。 因此按需加载或呈现这些组件似乎是一个更有效的决策。它可以提高程序的性能，同时也可以为我们节省大量资源。 怎么做？我们将创建一个示例程序，可以在其中使用惰性加载。首先需要通过以下命令使用 create-react-app 初始化 React 程序： create-react-app lazydemocd lazydemonpm run start默认情况下，这可能需要几分钟来进行初始化，并在浏览器的 3000 端口中打开我们的 react 程序。 如果你的电脑上还没有装 create-react-app，可以用以下命令安装：npm install -g create-react-app接下来将制作一个列表，显示一些随机的文章。所以先生成一些虚拟数据。在我们项目的 src 文件夹中创建一个名为 data.js 的文件。我刚从这个URL https://jsonplaceholder.typic... 复制粘贴了一些 json 响应。你也可以创建自己的虚拟数据。对于本教程，遵循以下格式就足够了： 让我们用下面的代码替换 App.js 文件的内容： 在这里，我们只是用 title 和 body 制作了一个 posts 列表。通过一些简单的 CSS 修改，得到下面的视图效果。这是立即渲染的完整列表。如果我们不想在一开始就渲染所有内容，就要用到 lazy loading。将它安装在我们的项目中： Source: twobin/react-lazyload npm install —-save react-lazyload现在，让我们通过导入并应用 lazyload 来更新 App.js 文件。 ...

May 21, 2019 · 1 min · jiezi

vue延迟加载、懒加载（比如加载vueCropper）

服务端渲染的时候，有些组件加载时候，浏览器会报错window is not defined 或者 document is not defined比如我们在使用前端的裁剪插件 vue-cropper时，刷新时或者使用nuxt框架服务端渲染时会报这样的错！这时候我们考虑到使用懒加载，就是延迟加载：1.引入组件const vueCropper = resolve => resolve(require(‘vue-cropper’))2.使用这样刷新操作，或者使用nuxt等服务端渲染框架就没有问题了！

January 15, 2019 · 1 min · jiezi

元素滚动高度和图片懒加载

一、转载内容首先转载两篇文章JS中height、clientHeight、scrollHeight、offsetHeight区别关于scrollTop,offsetTop,scrollLeft,offsetLeft用法介绍二、clientHeight和offsetHeight页面body的clientWidth和height是不加border的值，要包括padding的值页面body的offsetWidth和height是加border的值，要包括padding的值举个例子在页面控制台输入document.body.clientHeight 和document.body.offsetHeight 发现两者数值相同，因为body没有加border。当我给body加上10px的border，clientHeight就少了20px二、元素滚动高度当一个元素的内容多，高度超出他所在的容器高度，会出现滚动条1、element.scrollHeight 元素滚动内容的总长度element.scrollHeight 元素滚动内容的总长度。如果元素没出现滚动条， scrollHeight等于 clientHeight2、element.scrollTop 滚动的高度元素滚动的距离3、window.innerHeight 窗口的高度三、图片懒加载我只想写一点笔记，方便自己记忆，这篇文章干货较少。如果想学习懒加载的朋友，建议直接观看这篇文章实现图片懒加载(Lazyload)，这篇文章写得很好，懒加载主要是使用于图片比较多的情况，一次性加载所有的图片会给服务器比较大的压力，加载比较慢，所以我们先不加载未出现在页面可视区域内的图片，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。懒加载主要有3个步骤：1、把所有图片的src值换成另外一张图片的src值，把真正的src值放在data-src内2、判断元素是否从下方出现在可区域，$(node).offset().top<=$(window).height() + $(window).scrollTop()滚动时offset的值，offset().top为元素距离页面内容的高度3、把图片data-src换成src值<!DOCTYPE html><html><head><script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset=“utf-8”> <title>JS Bin</title> <style> .container { max-width: 800px; margin: 0 auto; } .container:after{ content: ‘’; display: block; clear: both; } .container img { float: left; width: 50%; } h1{ clear: both; } /* 因为img都是浮动，如果不清除浮动，h1的值高度就相当于container里面最高的，不是实际的数值 / </style> </head> <body> <div class=“container”> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“1” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/1.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“2” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“3” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“4” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“5” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/5.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“6” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/6.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“7” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/7.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“8” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/8.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“9” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/9.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“10” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/10.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“11” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/11.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“12” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/12.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“13” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/13.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“14” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/14.jpg"> <h1 id=“target”>hello</h1> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“15” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/15.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“16” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/16.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“17” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/17.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“18” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/18.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“19” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/19.jpg"> <img src=“http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt=“20” data-src=“http://cdn.jirengu.com/book.jirengu.com/img/20.jpg"> </div> <script> start() / 一开始没有滚动，也需要触发一次 / $(window).on(‘scroll’, function(){ start() }) function start(){ $(’.container img’).not(’[data-isLoaded]’).each(function(){ var $node = $(this) if( isShow($node) ){ loadImg($node) / setTimeout(loadImg($node),300)可以不做函数节流，懒加载本来就是为了提高响应速度的 */ } }) } function isShow($node){ return $node.offset().top <= $(window).height() + $(window).scrollTop() } function loadImg($img){ $img.attr(‘src’, $img.attr(‘data-src’)) $img.attr(‘data-isLoaded’, 1) /用于区别图片是否被加载过，防止重新加载/ } </script></body></html>执行结果 ...

December 20, 2018 · 1 min · jiezi

图片懒加载js实现

1.懒加载原理懒加载实现原理很简单,通过在img标签中设置一个H5自定义属性,在元素出现在可视区域时,替换默认的加载图片来达到效果2.实现代码<div id=“root”> <img src=“https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png" data-is-loaded=“false” data-src=“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220763007&di=45a5220dafdb197a4ab5316c2a42f734&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fac4bd11373f08202237cd08a49fbfbedaa641b9c.jpg" /> <img src=“https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png" data-is-loaded=“false” data-src=“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911449&di=ca58cde281401ca95b098f6047f698db&imgtype=0&src=http%3A%2F%2Fimg5.xiazaizhijia.com%2Fwalls%2F20150417%2Fmid_84422024ff063d3.jpg" /> <img src=“https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png" data-is-loaded=“false” data-src=“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911448&di=63a249145a90ae1681ce0b9c61354f2c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F9e3df8dcd100baa1f437f36f4d10b912c9fc2ece.jpg" /> <img src=“https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png" data-is-loaded=“false” data-src=“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911448&di=565668b21f797bef07c944c4f638c14a&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F13%2F71%2F35%2F24k58PICSiB_1024.jpg" /> <img src=“https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png" data-is-loaded=“false” data-src=“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911447&di=bf7ab0359c7c5f998d73671e1e62c5bb&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D8a953b1817950a7b6138468762b808ac%2F03087bf40ad162d9344e02321bdfa9ec8a13cd78.jpg" /> <img src=“https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png" data-is-loaded=“false” data-src=“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911446&di=8d04c9b363f1a924a96fb109276e890a&imgtype=0&src=http%3A%2F%2Fpic20.photophoto.cn%2F20110902%2F0034034471873095_b.jpg" /> <img src=“https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png" data-is-loaded=“false” data-src=“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911446&di=5dce0c273b95e9b80afe5573c730aa54&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F0%2F5789d87be269b.jpg" /> <img src=“https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png" data-is-loaded=“false” data-src=“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911446&di=1f8feec9ccc9f136f658ca39e5889545&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F16%2F42%2F18F58PIChTy_1024.jpg" /> <img src=“https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png" data-is-loaded=“false” data-src=“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911447&di=b6e2f4553b12b4822788bc637a239f94&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F83025aafa40f4bfbfbba4380094f78f0f63618ff.jpg" /> <img src=“https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png" data-is-loaded=“false” data-src=“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220991377&di=742d7957b05c57bd3c19c43ab736056f&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F38dbb6fd5266d016c2a2ac069c2bd40735fa3560.jpg" /></div>// 定时器,300ms延迟后加载图片let timer = null;let loadingImgUrl = ‘https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png';let loadingHeight = 0;let n = 0;function lazyload() { let imgs = document.getElementById(‘root’).getElementsByTagName(‘img’); // 获取可视窗口高度 let viewHeight = document.documentElement.clientHeight; for (let i = 0; i < imgs.length; i++) { let img = imgs[i]; // 获取图片离可视区域顶部的距离 let top = img.getBoundingClientRect().top; if(‘false’ == img.dataset.isLoaded && ((0 <= top && top <= viewHeight) || (top <= 0 && Math.abs(top) <= loadingHeight))) { // 打印1,2,…,9,10 console.log(++n); // 替换src img.src = img.dataset.src; img.dataset.isLoaded = true; } }}let image = new Image();image.src = loadingImgUrl;// 先加载loading图片,避免获取的img标签top属性不正确image.onload = function () { loadingHeight = image.height; lazyload();}window.addEventListener(‘scroll’, function () { clearTimeout(timer); timer = setTimeout(function () { lazyload(); }, 300);}) ...

December 19, 2018 · 1 min · jiezi