2021-05-24图片懒加载与预加载的区别

最新推荐文章于 2021-07-04 14:35:31 发布
最新推荐文章于 2021-07-04 14:35:31 发布
阅读量78 收藏
点赞数
分类专栏： 每日一题 文章标签： 懒加载 预加载 可视化区域 滚动监听 图片优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44805237/article/details/117221769
版权

图片懒加载原理： 当前图片是否到达可视化区域

1.拿到当前图片所有的dom

2.遍历每个图片判断当前图片是否到达可视化区域

3.如果到达可视化区域设置图片的src属性

4.绑定scroll事件，对其进行监听

参考1   参考2

 

 

预加载：页面打开图片之前，图片预先加载到浏览器中，缓存在用户本地；用到的时候直接进行渲染。

参考

 

coderLcy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解析javascript图片懒加载与预加载的分析总结
10-21
本篇文章介绍了javascript图片懒加载与预加载的分析，详细的介绍了懒加载和预加载的问题，有需要的可以了解一下。
图片懒加载--适合你的前端技巧
01-05
图片懒加载是一种优化网页性能的前端技术，尤其适用于图片丰富的网站和应用。它通过延迟加载非可视区域的图片，直到用户滚动到它们即将进入视口时才进行加载，从而减少了首屏加载时间，提升了用户体验。以下是对这个...
2021-07-04 实现网页图片懒加载
GAARA
07-04 77
文章目录思路代码htmljs效果 思路 在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值 1.加载loading图片 2.判断哪些图片要加载 3.隐形加载图片 4.替换真图片 代码 html <img src="./load.gif" alt="pic" class="lazy" data-src="./14.jpg"> <img src="./load.gif" alt="pic" class="lazy" data-src=
PreloadJS 预加载及实现进度加载效果
blog
02-23 4001
文章目录前言一、preload.js二、Demo总结 前言 在 H5 的开发过程中，我们不难发现在首次打开 H5 时，会有一个进度条表示当前页面全部文件的加载进度，并且当加载到100%的时候会跳转显示出首页的这一整个流程。这个流程我们可以通过 preload.js 插件来完成，下面我们先来介绍一下这个插件已经常用的监听事件。 一、preload.js 它是一个一致的方式预先加载在HTML应用的内容，以及预加载可以使用HTML标签作为XHR完成。 我们将要实现的功能，主要是在 LoadQueue 类中
七、防抖节流优化图片懒加载（2021/4/25）
weixin_41033048的博客
04-25 145
// 使用了节流函数~实现性能较好的懒加载（无论滑多快，都有加载的时间差） /使用了防抖函数~优化不断触发的窗口变化（重新计算我们的可视区域高度）
微信小程序-图片预加载组件
06-12
同时，为了性能优化，我们可以考虑使用懒加载策略，只在图片进入可视区域时开始预加载，避免无谓的资源浪费。 总结来说，微信小程序的图片预加载组件是提升用户体验的重要手段，它通过合理管理和调度图片资源的加载...
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
11-27
在Vue.js应用中，为了优化用户体验，特别是在处理大量图片或者网络环境较差时，可以采用图片懒加载技术。本文将详细讲解如何使用`vue-lazyload`插件来实现这一功能。 `vue-lazyload`是一个专门针对Vue.js设计的图片...
10.1 编写一个函数remove，删除数组指定元素，返回新的数组
qq_44805237的博客
01-22 1173
方法一：逐一删除 var arr = ['渡','一','教','育','渡'] function remove(arr , target){ len = arr.length; for(var i = 0; i < len; i++){ if(arr [i] == target){ for (var j = i; j < arr.length; j++){
10.21 test（）与 new test（）不同
qq_44805237的博客
01-26 1095
var a = 5; function test(){ a = 0; console.log(a); console.log(this.a); var a; console.log(a); } new test();
10.16 给定一个整型数组，在数组中找出由三个数组成的最大乘积，并输出这个乘积
qq_44805237的博客
01-25 730
nums.sort(); nums.sort(function(a,b){//将数组中的元素从大到小的进行排序 return a<b?1:-1; }); //如果nums中的元素全是正数，那么最大的乘积为：num1； num1=nums[0]*nums[1]*nums[2]; //如果nums中的元素num[1]的值是负数，那么最大的乘积为：num2； num2=nums...
10.3 将数字转化为二进制字符串
qq_44805237的博客
01-24 706
var num = 3; var value = parseInt(num).toString(2);
9.14 如何获取形参个数
qq_44805237的博客
10-17 645
function fn (a,b){ console.log(arguments.length); //5 实参个数 console.log(arguments.callee.length); //2 形参个数 } fn(1,2,3,4,5)
8.11 华为笔试算法题
qq_44805237的博客
08-17 629
<script type="text/javascript"> function find(nums , target){ var cache = []; for (var i = 0; i < nums.length; i++){ var half1 = nums[i]; var half2 = target - half1; var j = cache[half2]; ..
8.6 清除图片下方的像素空白间隙
qq_44805237的博客
10-13 582
（1）不讲理的方法：直接改变.demo的高度，让其和图片的高度一致就不会出现控股白间隙了，但是不推荐使用，因为这样对我们了解空白间隙的产生无意义。 *先弄明白间隙产生的原因：img是行级块（inline-block）元素，行级元素都有文本类元素的特点，文本类元素一般都有1.2em的行间距，如下图。 行级元素（行级块元素）： 1)有默认的行高：line-height：（1-1.2em） 2)有默认的垂直方向对齐方式 3)能被文字分隔符（空格或者回车）分割： a)加空格表示文字分隔，如下代码第二行会显示一个.
10.25 join与undefined与null
qq_44805237的博客
01-27 577
var a = new Array(3); var b = [undefined, undefined, undefined]; var c = [null, null, null]; var d = [false, false, false]; var e = [0, 0, 0]; console.log(a.join('-')); console.log(b.join('-')); console.log(c.join('-')); console.log(d.join('-')); co...
10.21L 九宫格井字棋
qq_44805237的博客
01-26 548
（1） 暴力解法：但是适合不知井字棋，更大也可以 let A = []; let B = []; let isAWin = false let isBWin = false let len = moves.length for (let i = 0; i < len; i++) { if (i % 2 == 0) { A.push(moves[..
8.12 var content = document.getElementsByClassName(“content“)；
qq_44805237的博客
08-17 453
<div class="wrapper"> <div class="content" id="content"></div> <div class="content"></div> <div class="content"></div> </div> <script type="text/javascript"> var content = document.get.
8.9 浮动 九宫格
qq_44805237的博客
08-17 451
【经典题】 使用HTML+CSS实现如图布局，border-width：5px，格子大小是50px*50px。hove在这里插入图片描述 r时边框变成红色，需要考虑语义化。 （1）首先想借用506具中模型和605浮动模型去实现该问题，感觉因为基础知识不牢固，所以没走通。以后再尝试。 （2）再联想到天猫导航栏的实例，再次尝试 ...
9.23 打印数组空位置，输出结果是什么，是否会报错
qq_44805237的博客
12-05 400
var a = [1,2,3 ]; a[10] = 99; a[99] = 100; console.log(a[6]); //undefined
10.14 给定一个按非递减顺序排序的整数数组 arr，返回每个数字的平方组成的新数组，要求也按非递减顺序排序L
qq_44805237的博客
01-25 389
注意JS来里面数组的sort（），直接排序是按照字符串进行排序的，对数字：arr.sort(function(a, b){return a - b}); var sortedSquares = function(arr) { var len = arr.length; var arr1 = []; for (var i = 0; i < len; i++){ arr1[i] = arr[i] * arr[i]; }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值