前端性能优化之图片按需加载

最新推荐文章于 2024-07-01 22:52:36 发布
最新推荐文章于 2024-07-01 22:52:36 发布
阅读量858 收藏 2
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47723644/article/details/113790780
版权
本文探讨了前端性能优化的重要性，特别是图片按需加载的策略。按需加载通过使用占位图减少初次加载时间，提高用户体验。在用户滚动到图片所在位置时，利用JavaScript动态替换图片路径以实现加载。这种优化方法能够加快页面展示速度，节约服务器带宽，并减少服务器压力。
摘要由CSDN通过智能技术生成

按需加载

为什么要做性能优化？

1、加快页面展示和运行速度(增强用户体验)
2、节约服务器带宽流量
3、减少服务器压力

什么是按需加载

按需加载是前端性能优化的一大措施。顾名思义，按需加载就是根据需要去加载资源。比如在html代码中我们会使用img标签来插入图片，而加载图片需要时间，一旦图片过多过大，就需要用户等待很长时间才能将页面加载出来。因此我们可以用体积较小的占位图来代替暂时不需要展示的图片，以此来减少加载时间。
在这里插入图片描述在这里插入图片描述很明显占位图比正常图片小很多,这样就可以减少加载时间

按需加载思路

思路: 在鼠标滚动时,计算图片距浏览器顶部的距离, 再与页面可视区高度与滚动条滚动距离之和作比较, 如果大于,就说明还不需要被加载, 如果小于或等于就说明用户即将看到图片,这个时候就需要加载正常图片.

document.documentElement.scrollTop || document.body.scrollTop用于获取滚动距离
document.documentElement.clientHeight用于获取可视区高度
imgs[i].offsetTop用于获取图片距浏览器顶部的距离

代码

<!DOCTYPE html>
<htm
最低0.47元/天 解锁文章
孤风随雨
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端实现图片懒加载(lazyload)的两种方式
05-01
NULL 博文链接：https://tangzongyun.iteye.com/blog/2399501
jQuery按需加载轮播图(web前端性能优化)
10-20
在本文中，作者首先提出了自己对普通轮播图插件的不满足...总的来说，这篇文章为前端开发者提供了如何利用jQuery实现轮播图按需加载和SEO优化的参考，对于希望优化网站性能和SEO表现的开发者来说，具有较高的借鉴价值。
图片的按需加载
weixin_30549175的博客
01-08 235
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #ul1{ margin: 10...
前端性能优化：提升网站加载速度的终极指南
最新发布
喔的嘛呀的博客
07-01 1692
综上所述，通过以上优化方案和具体措施，我们可以有效地提升网站的加载速度，改善用户体验，提高转化率，从而在激烈的市场竞争中脱颖而出，取得更好的业绩和口碑。作为前端工程师，我们应该不断学习和探索，不断优化和提升网站性能，为用户创造更好的上网体验。
图片按需加载
sqfbeijing的专栏
12-20 401
// 懒加载 function lazyload() { var imgs = document.getElementsByTagName("img"); var tmp_url; var winHeight = document.documentElement.clientHeight; for (var i = 0; i <
前端图片懒加载+按需加载范例
taotaobaobei的博客
12-26 1226
需要的依赖 jquery.js、jquery.lazyload.js 项目结构： |------app |------|--------js |-----|------jquery.js |-----|-----jquery.lazyload.js |----index.html index.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;...
网页前端优化之滚动延时加载图片示例
09-05
总结来说，滚动延时加载图片是一种优化网页前端性能的关键技术，它提高了用户体验，减少了页面加载时间。通过理解其工作原理并能灵活应用，无论是使用jQuery还是纯JavaScript，开发者都能为自己的项目带来显著的性能...
前端页面加载性能优化实践及运维.pdf
12-15
美团买菜iOS工程师王梓童分享了前端性能优化的实践经验，包括性能优化思路、措施和未来规划。 一、前端页面加载性能优化思路 前端页面加载性能优化的思路包括多个方面： 1. 首屏优化：首屏时间是用户体验的关键...
前端性能优化与实践.zip
07-23
"前端性能优化与实践.zip"这个压缩包包含了一系列关于前端性能优化的深度文章和教程，涵盖了浏览器缓存机制、首屏加载优化、服务端渲染、事件处理策略、图片优化、性能监测工具以及CDN的工作原理等多个方面。...
按需加载图片（图片懒加载）
luoyongmei0826的博客
08-14 4403
前言 按需要加载图片，这是一个非常实用的功能，不仅可以提高网站的性能，还可以为你节省流量。对于用虚拟主机的朋友来说，如果你的网站是一个图片网站或者图片比较多的网站，那么图片懒加载功能真不能少。 原理 实现图片懒加载的原理也非常地简单，默认情况下不给图片 scr 属性赋值。当满足一定的条件时才把图片地址取出来赋值给 src 属性。一般地，这上为了让网站页面有更好的用户体
前端实现图片懒加载url
05-03
前端实现图片懒加载url前端实现图片懒加载url前端实现图片懒加载url前端实现图片懒加载url前端实现图片懒加载url前端实现图片懒加载url前端实现图片懒加载url前端实现图片懒加载url前端实现图片懒加载url前端实现图片懒加载url前端实现图片懒加载url前端实现图片懒加载url前端实现图片懒加载url前端实现图片懒加载url
图片按需加载实现
z1048956673的博客
12-26 227
&#13; &#13;  &#13;  &#13; &#13; 1 &lt;!DOCTYPE html&gt;&#13; 2 &lt;html lang="en"&gt;&#13; 3 &lt;head&gt;&#13; 4 &lt;meta charset="UTF-8"&gt;&#13; 5
按需加载的图片
java攻城师
07-19 94
&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;按需加载的图片&lt;/title&gt; &lt;style type="text/css"&amp
Vue-lazyload（按需加载图片）
lihui61357457的博客
03-05 509
1.开发一个较大项目的时候，难免需要加载很多图片，但如果全部加载出来就会使性能降低 并且当用户只看到一部分而不需要后面的图片的时候，就会浪费性能资源 2.可以使用vue-lazyload按需加载 1.安装vue-lazyload m i vue-lazyload -S 2.配置main.js import VueLazyload from "vue-lazyload"; Vue.use(VueLazyload,{ //可以通过loading设置图片还未加载好之前的占位图片 loading:re
“按需加载”的应用
weixin_30646505的博客
10-23 234
“按需加载”的应用 按需加载是前端性能优化中的一项重要措施，按需加载是如何定义的呢？顾名思义，指的是当用户触发了动作时才加载对应的功能。触发的动作，是要看具体的业务场景而言，包括但不限于以下几个情况：鼠标点击、输入文字、拉动滚动条，鼠标移动、窗口大小更改等。加载的文件，可以是JS、图片、CSS、HTML等。后面将会详细介绍“按需”的理解。 ...
前端性能优化之按需加载(React-router+webpack)
weixin_30677475的博客
08-25 212
一、什么是按需加载 和异步加载script的目的一样(异步加载script的方法),按需加载/代码切割也可以解决首屏加载的速度。 什么时候需要按需加载 如果是大文件,使用按需加载就十分合适。比如一个近1M的全国城市省市县的json文件,在我首屏加载的时候并不需要引入,而是当用户点击选项的时候才加载。如果不点击,则不会加载。就可以缩短首屏http请求的数量以及时间。 如果是小文件,可以不必太在...
Vue性能优化：图片与组件，如何实现按需加载?
YunWisdom
08-07 1560
Vue性能优化：图片与组件，如何实现按需加载? 前沿：按需加载是性能优化其中的一个环节，可以是图片的按需加载，也就是lazyload来实现按需加载的场景,也可以是组件库的引入，只需部分组件的使用而无需全局引入整个组件库的场景，又可以是路由的按需加载，当路由被访问的时候才加载对应组件的场景，以此来实现更高效率的使用等等，本文把“懒加载”也划分为按需加载 1.图片按需加载 场景：当一个页面存在需要多个图片加载的场景时，可以通过我们经常看到的所谓“懒加载”，当滑动到图片相应的位置时再...
网站图片延迟加载（LazyLoad按需加载）
qq_46244454的博客
03-02 296
什么是LazyLoad按需加载 LazyLoad按需加载采用图片按需加载技术，打开页面时只会加载首屏图片。访客往下滚动时才会陆续加载需要展现的图片，这样非常高效，体验舒适。（类似功能：如何实现animate动画滑动加载网页） LazyLoad按需加载实现方法 我们在自己做网站时，也可以实现LazyLoad按需加载，增强网站的用户体验。下面学做网站论坛就来介绍一下LazyLoad按需加载实现方法。（...
前端性能优化实践：图片优化的质量与性能博弈
前端性能优化实践：图片优化——质量与性能的博弈 前端性能优化是一个非常重要的知识领域，对于前端开发者来说，它是一个必修课。性能优化可以分为多个方面，图片优化是其中的一个重要环节。本文将从图片优化的角度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值