HTML深度探索 ：img应用与实践

HTML深度探索 ：img应用与实践

  • 1、定义和用法
  • 2、图像格式
  • 3、常用属性
  • 4、预加载和懒加载
    • 4.1 预加载
    • 4.2 懒加载

1、定义和用法

  • HTML 元素 <img>将一张图像嵌入文档。

  • 从技术上讲，实际上并没有将图像插入到网页中，而是将图像链接到了网页。<img> 标签创建了一个容器，用于引用图像。

  • <img> 标签有两个必需的属性：

    • src - 规定图像的路径；
    • alt - 如果由于某种原因无法显示图像，则指定图像的替代文本；同时在无障碍的场景下，该属性也十分有用！

  • 注意：另外，始终要指定图像的宽度和高度。如果未指定宽度和高度，则在加载图像时页面可能会闪烁。

当在网页中插入图像但没有明确指定其宽度和高度时，浏览器最初并不知道该图像的实际尺寸。因此，在解析HTML并构建渲染树时，浏览器会预留一个默认大小（通常是32x32像素）或基于CSS的计算值的空间给图像。

一旦图像文件下载并解析，浏览器发现其实际尺寸与预留空间不匹配时，就需要重新布局页面以适应图像的真实大小。这个过程会导致已加载的内容突然移动，从而产生所谓的“内容闪烁”或“重排闪烁”，这会降低用户体验，尤其是在移动设备上。

这种布局变化还会影响网页的累积布局偏移（Cumulative Layout Shift, CLS）。CLS度量了用户在页面加载过程中非预期的布局变化程度。较大的CLS值表明页面元素在加载时有较多的移动，这通常被认为是负面的用户体验。因此，为了优化网页性能和提高用户满意度，最好在HTML中为图像指定确切的宽度和高度属性。这样可以让浏览器在加载图像之前就正确预留空间，避免不必要的布局调整和闪烁现象。

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.image {width: 500px;height: 500px;object-fit: cover;}</style></head><body><img class="image"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg" alt="Ai绘图" />
</body></html>

在这里插入图片描述

2、图像格式

Web 最常用的图像格式是：

  • APNG（动态可移植网络图形）——无损动画序列的不错选择（GIF 性能较差）。
  • AVIF（AV1 图像文件格式）——静态图像或动画的不错选择，其性能较好。
  • GIF（图像互换格式）——简单图像和动画的不错选择。
  • JPEG（联合图像专家组）——有损压缩静态图像的不错选择（目前最流行的格式）。
  • PNG（便携式网络图形）——对于无损压缩静态图像而言是不错的选择（质量略好于 JPEG）。
  • SVG（可缩放矢量图形）——矢量图像格式。用于必须以不同尺寸准确描绘的图像。
  • WebP（网络图片格式）——图像和动画的绝佳选择。

推荐使用 WebP 图像格式，因为它们在静态图像和动画的性能均比 PNG、JPEG、JIF 好得多。

对于必须以不同尺寸准确绘制的图像，则仍然推荐使用 SVG 格式。

3、常用属性

  • alt – 定义了图像的备用文本描述。

  • title – 元素的值一般作为提示条（tooltip）呈现给用户，在光标于图片上停下后显示出来。

  • height – 图像的固有高度，以像素为单位。必须是没有单位的整数值。

  • width – 图像的宽度，以像素为单位。必须是没有单位的整数。

实际工作中宽度和高度并不会共同使用，因为如果只单独设置了一个属性比如宽度，高度会等比例进行缩放。

  • loading – 指示浏览器应当如何加载该图像。
    • eager：立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。
    • lazy：延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。
<img loading="lazy" class="image" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg" alt="Ai绘图" />
  • decoding – 指定浏览器如何解码图像。可以是 “sync”（同步）或 “async”（异步）。默认为 “sync”。
<img decoding="sync" class="image" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg" alt="Ai绘图" />

decoding 和 loading 属性在 <img> 标签中控制着图像的加载和解码行为，它们各自负责不同的层面。decoding 属性控制图像的解码方式。loading 属性控制图像何时开始加载。

  • crossorigin (crossOrigin) – 设置跨域资源共享(CORS)属性，允许从不同源加载图像并访问其像素数据。

  • src – 图像的 URL，这个属性对<img>元素来说是必需的。

  • sizes – 用于响应式设计，告诉浏览器根据不同的视口尺寸选择合适的图像资源。

  • srcset – 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。

<img src="image-small.jpg"srcset="image-320w.jpg 320w,image-480w.jpg 480w,image-800w.jpg 800w,image-large.jpg 1200w"sizes="(max-width: 600px) 100vw,(max-width: 900px) 50vw,33vw"alt="example image">

这个配置告诉浏览器：

在屏幕宽度小于等于600px时，图像应占据整个视口宽度 (100vw)。 在屏幕宽度小于等于900px时，图像应占据视口的一半宽度
(50vw)。 在屏幕宽度大于900px时，图像应占据视口的三分之一宽度 (33vw)。
浏览器会根据当前视口宽度和可用的图像资源来决定加载哪个图像版本，以达到最佳的性能和视觉效果。

<picture><source media="(max-width: 600px)" srcset="small-image.jpg"><img src="large-image.jpg" alt="图片描述">
</picture>

4、预加载和懒加载

4.1 预加载

  • 图像预加载（Image Preloading）是一种优化技术，它允许在页面的其他部分完全加载之前就开始加载图像，从而提高用户体验，尤其是对于那些位于页面下方但对用户来说很重要的图像。以下是在HTML中实现图像预加载的几种方式：
  1. 使用 <link rel="preload">
  • <link rel="preload"> 标签允许开发者提前告知浏览器加载特定的资源，包括图像。这是目前推荐的方法，因为它是专门为预加载设计的，而且被广泛支持。
<link rel="preload" href="path/to/image.jpg" as="image">
  • 这里的 as 属性指定了资源的类型，在这里是图像。这使得浏览器可以优先加载这些图像，即使它们在页面上的位置很远。
  1. 使用 JavaScript
  • 通过JavaScript，你可以动态地创建一个新的 Image 对象并加载图像。这种方法在旧的浏览器中更为常见，但现在由于 <link rel="preload"> 的存在而较少使用。
// JavaScript 预加载图像示例
window.addEventListener('DOMContentLoaded', function() {var img = new Image();img.src = 'path/to/image.jpg';
});

const imageUrls = ["image1.jpg", "image2.jpg", "image3.jpg"];
const images = [];imageUrls.forEach(url => {const img = new Image();img.src = url;images.push(img);
});
  • 在上述代码中，通过创建一个新的 Image 对象，并设置其 src 属性，可以在后台加载图像。这样，当需要显示这些图像时，它们已经在浏览器中缓存了。
  1. 利用 CSS Background Images
  • 如果图像将用作背景图像，你可以利用CSS的背景图像属性进行预加载。虽然这不是严格意义上的预加载，但它可以确保背景图像在需要时已经加载完成。
/* CSS 预加载背景图像 */
.some-element {background-image: url('path/to/image.jpg');
}

4.2 懒加载

  1. 使用 loading 属性（HTML5）：HTML5 引入了 loading 属性，可以用于延迟加载图像，仅当图像进入用户视口时才会加载。当用户滚动到图像所在的位置时，浏览器会自动加载图像。
<img src="image.jpg" alt="图片描述" loading="lazy">
  1. 使用 Intersection Observer（JavaScript）：Intersection Observer 是一种 JavaScript API，可以监听元素是否进入用户视口，从而实现懒加载
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.image {width: 500px;height: 500px;object-fit: cover;display: block;}</style></head><body><img class="image" src=''data-src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"alt="Ai绘图" /><img class="image" src=''data-src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"alt="Ai绘图" /><img class="image" src=''data-src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"alt="Ai绘图" /><img class="image" src=''data-src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"alt="Ai绘图" /><img class="image" src=''data-src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"alt="Ai绘图" /><img class="image" src=''data-src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"alt="Ai绘图" /><img class="image" src=''data-src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"alt="Ai绘图" /><img class="image" src=''data-src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"alt="Ai绘图" /><img class="image" src=''data-src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"alt="Ai绘图" /><img class="image" src=''data-src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"alt="Ai绘图" /><img class="image" src=''data-src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"alt="Ai绘图" /><img class="image" src=''data-src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"alt="Ai绘图" /><script>document.addEventListener('DOMContentLoaded', function () {const images = document.querySelectorAll('.image');const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {// 当图像进入视口时，用实际的图像URL替换占位符entry.target.src = entry.target.dataset.src;console.log(entry.target.src);// 从图像中删除懒加载类，防止重复加载entry.target.classList.remove('lazy-load');// 不再观察这个元素，避免不必要的计算observer.unobserve(entry.target);}});}, {// 可选：配置观察选项，如根元素、阈值等threshold: 0.5 // 当元素有50%出现在视口中时就开始加载});images.forEach(image => {observer.observe(image);});});</script>
</body></html>
  • 在文档加载完成后，选取所有具有image类的图像元素。创建一个新的IntersectionObserver实例，当被观察的元素与视口相交时调用回调函数。遍历所有被观察的图像，如果图像进入了视口，就用data-src属性中存储的URL替换src属性的值，同时删除image类，并停止对该图像的观察。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/423419.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Maven从入门到精通（三）

Maven从入门到精通（三）

一、Settings 配置 settings.xml 用来配置 maven 项目中的各种参数文件&#xff0c;包括本地仓库、远程仓库、私服、认证等信息。 全局 settings、用户 setting、pom 的区别&#xff1a; 全局 settings.xml 是 maven 的全局配置文件&#xff0c;一般位于 ${maven.home}/conf…
阅读更多...
API数据接口：开启智能应用的钥匙

API数据接口：开启智能应用的钥匙

在当今数字化时代&#xff0c;数据已成为企业的核心资产。API&#xff08;应用程序编程接口&#xff09;数据接口作为连接不同软件和服务的桥梁&#xff0c;正变得越来越重要。本文将为您详细介绍API数据接口的概念、优势、使用场景以及如何高效利用API接口&#xff0c;以期帮助…
阅读更多...
初学51单片机之IO口上下拉电阻相关

初学51单片机之IO口上下拉电阻相关

本案本来是描述一下I2C总线的&#xff0c;在此之前推荐一下B站一个UP关于时序图的讲解 I2C入门第一节-I2C的基本工作原理_哔哩哔哩_bilibili 不过在描述I2C前先简单的探讨下51单片机IO口下拉电阻的基本情况&#xff0c;事实上这个问题困扰笔者很长时间了&#xff0c;这次也是一…
阅读更多...
Llama Factory ：百种以上语言模型的统一高效微调框架

Llama Factory ：百种以上语言模型的统一高效微调框架

人工智能咨询培训老师叶梓 转载标明出处 大模型适应到特定下游任务时&#xff0c;传统的全参数微调方法成本高昂&#xff0c;因此&#xff0c;研究者们一直在探索更高效的微调技术。由北京航空航天大学和北京大学的研究团队提出了一个名为Llama Factory的统一框架&#xff0c;…
阅读更多...
QT天气预报

QT天气预报

json 理论 什么是JSON? 规则 被大括号包括的是JSON对象,被中括号包括的是JSON数组. JSON数组JSON对象 实验 构建JSON 用代码实现如下json内容: //构建JSON void WirteJson() {QJsonObject rootObject;//1.插入name字段rootObject.insert("name","china&quo…
阅读更多...
威胁建模STRIDE框架

威胁建模STRIDE框架

威胁建模STRIDE框架 1.威胁建模框架概述2.STRIDE威胁建模框架欺骗 - 冒充某人或某物篡改 - 未经授权更改数据否认性 - 不宣称对执行的操作负责信息泄露 - 查看不应查看的数据拒绝服务 - 系统繁忙权限提升 - 拥有本不应该拥有的权限 3.后续的威胁发现 1.威胁建模框架概述 威胁建…
阅读更多...
vxe-table之复选框 设置父子节点不互相关联

vxe-table之复选框 设置父子节点不互相关联

通过 checkStrictly 设置父子节点不互相关联&#xff0c;默认不显示头部复选框&#xff0c;可以通过 checkbox-config{showHeader} 设置 <template><div><vxe-table:column-config"{resizable: true}":data"tableData":tree-config"{…
阅读更多...
sharding-jdbc metadata load优化(4.1.1版本)

sharding-jdbc metadata load优化(4.1.1版本)

背景 系统启动时&#xff0c;会注意sharding-jdbc提示加载metadata 于是想看看里面做了什么事情 问题追踪 debug后可以观察走到了该类 org.apache.shardingsphere.shardingjdbc.jdbc.core.context.ShardingRuntimeContext#loadSchemaMetaData 先看这个shardingRuntimeConte…
阅读更多...
嵌入式-QT学习-小练习

嵌入式-QT学习-小练习

1. 实现多窗口 2. 给按键增加图标 3. 动图展示 结果演示&#xff1a; Mul_Con main.cpp #include "widget.h"#include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); }一、第一个窗口展示 …
阅读更多...
Android 测试机

Android 测试机

要测手机应用&#xff0c;直接挂电脑上跑虚拟机的话&#xff0c;怀疑电脑都要起火了。 eBay 上买了个新的机器&#xff0c;也才 100 美元多点&#xff0c;机器都没有拆过&#xff0c;电池是完全无电的状态。 操作系统是 Android 12 的版本&#xff0c;升级到 Android 14 后&am…
阅读更多...
苹果CMS vs. 海洋CMS：哪个系统更易于百度收录？

苹果CMS vs. 海洋CMS：哪个系统更易于百度收录？

在选择网站内容管理系统&#xff08;影视网站选择那个CMS&#xff1f;&#xff09;时&#xff0c;收录效率和优化能力是关键考量因素。苹果CMS和海洋CMS都是受欢迎的选项&#xff0c;但在百度收录效果上&#xff0c;苹果CMS表现得更为出色。以下将详细探讨苹果CMS为何在百度收录…
阅读更多...
uni-app生命周期（三）

uni-app生命周期（三）

文章目录 一、uni-app的生命周期二、应用生命周期三、页面的生命周期函数1.简介2.页面加载时序介绍3.页面加载常见问题4.页面加载顺序4.部分生命周期介绍 四、组件的生命周期函数 一、uni-app的生命周期 应用生命周期&#xff08;整个App的生命周期&#xff09; 在app.vue里面…
阅读更多...
是德keysight N7552A 9G电子校准件2端口

是德keysight N7552A 9G电子校准件2端口

是德keysight N7552A 9G电子校准件2端口 频率范围为直流到 9 GHz 支持 N 型和 3.5 mm 连接器 更小、更轻巧的 2 端口电子校准件 零等待时间&#xff0c;实现更快校准 兼具电子校准件的便利性与经济型机械套件的性能 N7552A 支持是德科技的 PNA-X、PNA、ENA、PXI 矢量网络分…
阅读更多...
四、滑动窗口-算法总结

四、滑动窗口-算法总结

文章目录 四、滑动窗口4.1 模板4.2 示例4.2.1 最小覆盖子串4.2.2 字符串的排列4.2.3 找到字符串中所有字母异位词4.2.4 无重复字符的最长子串 四、滑动窗口 4.1 模板 /* 滑动窗口算法框架 */ void slidingWindow(string s, string t) {unordered_map<char, int> need, …
阅读更多...
QT::QComboBox自定义左击事件信号

QT::QComboBox自定义左击事件信号

因为QComboBox没有自定义的clink信号&#xff0c;所以自己新建一个MyComBox类继承QComboBox&#xff0c;并且添加自定义的左击信号&#xff0c;以及使用该信号连接一个槽函数 mycombobox.h #ifndef MYCOMBOBOX_H #define MYCOMBOBOX_H#include <QComboBox> #include &l…
阅读更多...
在 Mac 上安装虚拟机怎么样，安装虚拟机与直接安装 Windows 系统有区别吗？

在 Mac 上安装虚拟机怎么样，安装虚拟机与直接安装 Windows 系统有区别吗？

随着跨系统操作的不断发展&#xff0c;虚拟机技术在生产力领域扮演着越来越重要的角色。Mac作为一款主流的操作系统&#xff0c;也有着运行虚拟机的能力。接下来给大家介绍Mac装虚拟机好不好&#xff0c;Mac装虚拟机和装Windows系统一样吗的具体内容。 Mac装虚拟机好不好 Mac…
阅读更多...
通信工程学习：什么是FDMA频分多址

通信工程学习：什么是FDMA频分多址

FDMA&#xff1a;频分多址 FDMA&#xff08;Frequency Division Multiple Access&#xff0c;频分多址&#xff09;是一种在无线通信领域广泛应用的多址技术。该技术通过将可用的频谱资源按频率划分&#xff0c;把传输频带划分为若干较窄且互不重叠的子频带&#xff08;或称信道…
阅读更多...
SprinBoot+Vue爱老助老服务平台的设计与实现

SprinBoot+Vue爱老助老服务平台的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质…
阅读更多...
c/c++面试100道

c/c++面试100道

1.一道笔试题解析_哔哩哔哩_bilibili P20&#xff1a;#define offsetof(TYPE, MEMBER) ((size_t)&((TYPE*)0)->MEMBER) 1、 offsetof 宏是 C 语言中用于计算结构体成员相对于结构体起始地址的偏移量的宏定义。这个宏的定义如下&#xff1a; #define offsetof(TYPE, …
阅读更多...
JavaScript模块化——ES6模块化规范

JavaScript模块化——ES6模块化规范

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境&#xff1a;vscode Chrome浏览器 1.ES6 1.1ES6介绍 ES6的全称是ECMAScript 6&#xff0c;也称为ES2015&#xff0c;是JavaScript的一个重要版本&#xff0c;它引入了许多新特性和改进&#xf…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023