在 HTML 的其他内容之前加载图像

Question

我的网站是简单的一页。 一个大的整页图片和 10 行文本以及一些链接，如隐私政策、条款等。

所以，当我的网站加载时。 在图像之前先加载文本，这会降低用户体验。 我希望在页面的其他内容之前先加载图像。

我的代码：

<link rel="preload" href="//www.example.com/one/img/ckd.png" as="image">
<link rel="prefetch" href="//www.example.com/one/img/ckd.png" />

Answer 1

您可以从隐藏文本开始，然后onload图像，使其可见。 注意：这可能会对 PageSpeed 测试产生负面影响，因为内容的时间会增加。 使用网络（Devtools，网络选项卡）和 Lighthouse 选项卡上的节流阀进行测试。

 <link rel="preload" href="https://picsum.photos/id/237/200/300" as="image"> <link rel="prefetch" href="https://picsum.photos/id/237/200/300" /> <style> body.hide-text h1 { visibility: hidden } h1 { font-size: 30px; color: white; padding: 50px; } img { position: absolute; z-index: -1; } </style> <body class="hide-text"> <img src="https://picsum.photos/id/237/400/300" onload="show_text()"> <h1>hello world</h1> <script> function show_text() { document.body.classList.remove("hide-text"); } </script> </body>

在 HTML 的其他内容之前加载图像

问题描述

1 个解决方案

解决方案1
0 2022-07-04 16:59:33

在 HTML 的其他内容之前加载图像

问题描述

1 个解决方案

解决方案1 0 2022-07-04 16:59:33

解决方案1
0 2022-07-04 16:59:33