首页 > 其他分享 >一个页面上有大量的图片,加载很慢, 你有哪些方法优化这些图片的加载,给用户更好的体验

一个页面上有大量的图片,加载很慢, 你有哪些方法优化这些图片的加载,给用户更好的体验

时间:2022-11-12 14:00:25浏览次数:46  
标签:压缩 加载 用户 体验 页面 图片

一个页面上有大量的图片,加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验

点击查看代码
图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距
离与页面的距离,如果前者小于后者,优先加载。
如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载。
如果图片为 css 图片,可以使用 CSSsprite,SVGsprite,Iconfont、Base64 等技术。
如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提
高用户体验。
如果图片展示区域小于图片的真实大小,则因在服务器端根据业务需要先行进行图片压缩,图片
压缩后大小与展示一致

标签:压缩,加载,用户,体验,页面,图片
From: https://www.cnblogs.com/strundent/p/16883613.html

相关文章

  • ODOO前端引用css如何修改页面属性
    odoo前端存在一些样式不合理的地方,如何通过ccs修改页面属性:1 通过页面属性class;2 新建模块后,创建static/src/css/styles.css文件  3 style.css内容十分简单,设......
  • 「趣学前端」页面上吸顶的效果是怎么做到的
    背景我身边一些非互联网技术从业的朋友,偶尔看我转发到朋友圈的文章,会表示出一定的兴趣。前段时间,有朋友问我公众号的问题,所以我来了灵感,准备写一个趣学前端系列,适用于零基础......
  • Ribbon负载均衡策略、懒加载及饥饿加载
    目录​​一、负载均衡概述​​​​二、负载均衡策略​​​​三、懒加载及饥饿加载​​一、负载均衡概述        在业务初期,我们一般会先使用单台服务器对外提供服务......
  • JVM--类加载机制
    对类加载机制的学习类加载过程分为五个部分:加载,验证,准备,解析,初始化加载加载,这个阶段的工作是查找并加载类的二进制文件,在这个阶段中,类的字节码文件通过类加载器加载到......
  • 【luffy】登录注册前端页面,腾讯短信功能验证,短信验证码,登录接口
    目录1.登录接口两个问题2.登录注册模拟框3.腾讯短信功能二次封装3.1脚本测试发短信3.2把发送短信封装成包1.登录接口两个问题1.使用authenticate只能使用usernam......
  • Java安全之动态加载字节码
    Java字节码简单说,Java字节码就是.class后缀的文件,里面存放Java虚拟机执行的指令。由于Java是一门跨平台的编译型语言,所以可以适用于不同平台,不同CPU的计算机,开发者只需......
  • WinHex 可发现一些图片或文件的隐含信息
    文章内容简介:用WinHex发现图片的隐含信息一、取一张特殊的图片  我们正常打开,发现没有什么特殊的信息 二、用winhex打开  打开后,我们发现存在信息:tomisth......
  • 三环PE文件自行加载,并运行,解析PE结构,修复IAT,修复重定位表
    1//PELoad.cpp:此文件包含"main"函数。程序执行将在此处开始并结束。2//34#include<iostream>5#include<windows.h>6#include<tchar.h>......
  • php 上传图片 报500 解决方案
    首先排查php文件配置是否正确,网上有很多都是这种文章,这里不赘述。分享下我的情况,php配置文件里的upload_tmp_dir若未指定目录,那么默认的临时存放目录是C:\Windows\Temp,我......
  • 【转行测试开发-HTML】(十)注释、独立编写页面和完成老师的题目
    上一节我们学会了锚点定位,从上到下的会用了,那么从底部往上会用了吗?比如底部有一个返回顶部的按钮,要求点击后回到页面的顶部。我们写代码来尝试下。先看看效果:点击红框里的......