跳到主要内容

认识

2024年02月23日
柏拉文
越努力，越幸运

一、认识​

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

二、语法​

2.1 <img>​

2.2 new Image()​

const image = new Image(100, 200);
image.src = 'picture.jpg';
document.body.appendChild(image);

2.3 document.createElement('img')​

const image = document.createElement("img");
image.src = 'picture.jpg';
document.body.appendChild(image);

三、沉淀与思考​

3.1 background-image 是怎么加载图片的? 与 img 标签相比, 哪种方式先加载? 哪种方式性能更好?​

  • <img />: 是Html标签, 浏览器在解析 HTML 代码时，遇到 <img> 标签会直接请求对应的图片，并将其插入到文档流中。因此，图片会和其他 HTML 元素一起加载，如果图片过大或数量过多，会导致网页加载缓慢。如果引入了一个很大的图片, 那么在这个图片下载完成之前, <img /> 后的内容都不会显示。

    • 加载操作: 可以设置 loading 属性来指定图片的加载方式（如 lazy 可以延迟加载图片）

    • 适用场景:

      • <img /> 标签可以添加alt属性, 能更好的SEO, 有着更好的语义化;也可以被一些读屏软件识别。一般来说，如果图片是周围的文字内容的一部分，比如logo，图表，人等，那么用img

      • <img /> 内容支持打印。所以如果有打印网页的需求,且希望将图片的内容也打印出来, 那么需要使用 <img />

  • background-image: 是Css属性, 会等到DOM结构加载完成后, 具体的话就是当浏览器解析到这个样式时,不会立即请求图片,而是等到元素在文档流中展现时才会请求。如果引入了一个很大的图片, 等到DOM结构加载完成之后,才开始加载背景图片, 所以background-image不会影响网页内容的显示。这样可以减少在页面渲染之前请求的图片数量，提高页面的加载速度。但如果同时加载多张背景图片，也会影响页面性能。

    • 适用场景:

      • background-image 图片内容不是内容的一部分, 属于UI设计装饰性的图片, 所以建议使用background-image

      • background-image 内容不支持打印。所以如果有打印网页的需求,但是不希望将图片的内容也打印出来, 那么需要使用 background-image