在前端开发中，常常需要加载外部资源，比如图片、视频、音频等。然而，由于网络环境的不稳定性和服务器负载等原因，可能会导致这些资源无法正常加载。为了提高用户体验，我们需要通过一些技术手段来处理这种情况。在本文中，我们将介绍两种解决方案：降级图片和超时控制。
降级图片
降级图片是指在原始图片无法加载时，采用备用图片来代替。这种技术可以有效避免页面出现空白图像，从而改善用户体验。通常，我们可以通过以下两种方式来实现降级图片。
使用 onerror 事件
当图片加载失败时，浏览器会触发 onerror 事件。我们可以在该事件中设置备用图片的 URL。
<img src="original-image.jpg" onerror="this.src='fallback-image.jpg'" />
上面的代码表示当原始图片无法加载时，将使用名为 fallback-image.jpg 的备用图片来替代。
使用 object-fit 属性
object-fit 属性可以控制图片在容器中的显示方式。我们可以将图片设置为填充容器，从而实现降级效果。
img {
object-fit: cover;
background-image: url(fallback-image.jpg);
}上面的代码表示当图片无法加载时，将显示名为 fallback-image.jpg 的备用图片。
超时控制
超时控制是指当外部资源加载时间过长时，通过设置超时时间来中断请求。这种技术可以防止页面长时间卡顿或者崩溃，从而改善用户体验。通常，我们可以通过以下两种方式来实现超时控制。
使用 setTimeout 函数
我们可以在加载资源的代码中，使用 setTimeout 函数来设置超时时间。当超出设定的时间后，我们可以手动中断请求。
-- -------------------- ---- -------
----- --- - --- --------
---------- - ---------- -
-- ------------
--
----------- - ---------- -
-- ------------
--
------- - ------------
--------------------- -
-- --------------- - -- ---------
------- - --- -- ----
-- --------
-
-- ------ -- ----------上面的代码表示当图片加载超过5秒钟时，将中断请求并执行超时处理代码。
使用 AbortController 对象
我们也可以使用 AbortController 对象来实现超时控制。该对象提供了一个 abort 方法，可以中断请求。
-- -------------------- ---- -------
----- ---------- - --- ------------------
----- ------ - ------------------
----- --- - --- --------
---------- - ---------- -
-- ------------
--
----------- - ---------- -
-- ------------
--
------- - ------------
--------------------- -
------------------- -- ----
-- --------
-- ------ -- ----------
------------ - ------ ---------------- -- -
-- ------
-------------- -- -
-- ----------- --- ------------- -
-- -----
-- --------
- ---- -
-- ------
-
---上面的代码表示当请求超过5秒钟时，将中断请求并执行超时处理代码。注意，使用 AbortController 对象需要配合 fetch 函数使用。
总结
本文介绍了两种解决外部资源加载问题的技术：降级图片和超时控制。通过这些技术，我们可以提高用户体验，避免页面出现空白
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31221