当前位置: 首页 > 网络应用技术

如何首先加载图片?

时间:2023-03-07 23:30:01 网络应用技术

  通过打开开发人员工具,背景图片的优先级较低,并且产品图片的优先级很高,因此,首先加载了产品图片,然后是背景图片。

  在检查原因之后,发现由于背景图是通过CSS中的背景图像实现的,因此大多数主流浏览器都会降低标签图片以加载优先级,并且在所有首页都将在所有主页上加载加载。

  通过上述演示,我尝试了两种方法,证明它们都可以:

  最后,这两张图片是我们的背景图片。可以看出,它是在开始时加载的。与以前不同,产品图片像以前一样加载。

  最后,从效果开始,我选择了第二种方式。

  由于上述对背景图片优先加载方法的理解,让我们看一下图片资源的优先加载方法。

  下载必要的资源,尤其是对于在浏览器初期不容易找到的资源。

  您可以使用属性来控制加载资源加载更详细的优先级,包括和这些标签。可以优先增强LCP图像。

  该属性可以指定三个值:

  除了上述图片外,它还可以做其他事情:

  为了防止预加载资源和其他关键资源的竞争,它可以减少其优先级:

  如果页面上有一些必要的交互脚本,但是您不需要阻止其他资源,则可以将它们标记为高优先级,同时将它们加载为异步:

  如果脚本取决于特定节点,则不能将它们标记为异步。但是,如果它们不需要第一个屏幕渲染,则可以减少其优先级: