网页性能优化之图片懒加载

2024-06-06 15:33:39

一、前言

最近因为需要做一个小网站，但是呢，因为图片比较多，打开网页速度很慢，服务器压力就会很大。不仅影响渲染速度还会浪费带宽，比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。于是就想到了图片懒加载来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能，可以大幅度的提高网页加载速度，效果很明显，于是想着将这个方法记录下来，方便以后或者有需要的人使用，方法和功能都是亲测可用，请放心观看。

二、原理

先将 img 标签的 src 链接设为同一张图片（一般是loading.gif图片），然后给 img标签 设置自定义属性（ data-src），然后将真正的图片地址存储在 data-src 中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。

三、实现

网页loading.gif 素材：http://www.sucaijishi.com/2013/gif_0527/57.html

  <a  href="javascript:;" class="img" rel="nofollow" ><img src="/static/images/utils/loading.gif" th:data-src="${goodList.goodsImg}"></a>

Js实现原理

<script>// 一开始没有滚动的时候，出现在视窗中的图片也会加载start();// 当页面开始滚动的时候，遍历图片，如果图片出现在视窗中，就加载图片var clock; //函数节流$(window).on('scroll',function(){if(clock){clearTimeout(clock);}clock = setTimeout(function(){start()},200)})function start(){$('.img img').not('[data-isLoading]').each(function () {if (isShow($(this))) {loadImg($(this));}})}// 判断图片是否出现在视窗的函数function isShow($node){return $node.offset().top <= $(window).height()+$(window).scrollTop();}// 加载图片的函数，就是把自定义属性data-src 存储的真正的图片地址，赋值给srcfunction loadImg($img){$img.attr('src', $img.attr('data-src'));// 已经加载的图片，我给它设置一个属性，值为1，作为标识// 弄这个的初衷是因为，每次滚动的时候，所有的图片都会遍历一遍，这样有点浪费，所以做个标识，滚动的时候只遍历哪些还没有加载的图片$img.attr('data-isLoading',1);}</script>

四、效果展示

网页性能优化之图片懒加载相关推荐

vue 图片拖动加载类似于地图_前端性能优化之图片懒加载（附vue自定义指令）...
作者:lzg9527 链接:https://juejin.cn/post/6903774214780616718 在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列 ...
性能优化之图片懒加载
本文在github做了收录 github.com/Michael-lzg- demo源码地址 github.com/Michael-lzg- 为什么要进行图片懒加载我们先来看一下页面启动时加载的图片 ...
vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多问题起源于我们的一个页面,下 ...
性能优化---vue路由懒加载和异步组件
1.路由懒加载整个网页默认是刚打开就去加载所有页面,路由懒加载就是只加载你当前点击的那个模块. 实现方式有: 1.require:加载组件. component: resolve => req ...
前端性能优化的重要方案：图片懒加载
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端性能优化的重要方案:图片懒加载,主要包括其原理,我们常用的一些插件,及编写源码实现图片懒加载功能等,图片懒加载是项目比较常见的 ...
前端图片渲染性能优化与实践 — 图片懒加载
前言对于图片量比较大的点上首页APP等,在打开商品展示页面的时候需要再加大量图片,在这种场景下如果直接全量加载,必然会造成页面性能消耗过大,白屏或者卡顿,用户体验非常糟糕,用户真的需要我们显示所有图 ...
JQuery实现网页图片懒加载
使用img标签加载图片,在网页上显示图片,这里就简单的设置一下样式了,主要目的是展示图片的不同加载方式. 1.普通实现方式普通的实现方式就是不做任何处理,需要使用到图片时就去加载图片,这些图片一般存 ...
微信小程序优化：如何实现图片懒加载？
前言当我们在使用微信小程序浏览图片时,不可避免地会遇到加载缓慢的情况.这不仅会影响用户体验,还会耗费用户的流量.那么,有没有一种方法可以让图片在用户需要时再进行加载,从而提升用户体验和减少流量消耗呢 ...
java页面展示流式图片,javascript瀑布流式图片懒加载实例解析与优化
之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒 ...
懒加载实践--js图片懒加载及优化
一.前言为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...

最新文章

热门文章