Fallback image and timeout - External Content. Javascript

阅读时长 4 分钟读完

在前端开发中,常常需要加载外部资源,比如图片、视频、音频等。然而,由于网络环境的不稳定性和服务器负载等原因,可能会导致这些资源无法正常加载。为了提高用户体验,我们需要通过一些技术手段来处理这种情况。在本文中,我们将介绍两种解决方案:降级图片和超时控制。

降级图片

降级图片是指在原始图片无法加载时,采用备用图片来代替。这种技术可以有效避免页面出现空白图像,从而改善用户体验。通常,我们可以通过以下两种方式来实现降级图片。

使用 onerror 事件

当图片加载失败时,浏览器会触发 onerror 事件。我们可以在该事件中设置备用图片的 URL。

上面的代码表示当原始图片无法加载时,将使用名为 fallback-image.jpg 的备用图片来替代。

使用 object-fit 属性

object-fit 属性可以控制图片在容器中的显示方式。我们可以将图片设置为填充容器,从而实现降级效果。

上面的代码表示当图片无法加载时,将显示名为 fallback-image.jpg 的备用图片。

超时控制

超时控制是指当外部资源加载时间过长时,通过设置超时时间来中断请求。这种技术可以防止页面长时间卡顿或者崩溃,从而改善用户体验。通常,我们可以通过以下两种方式来实现超时控制。

使用 setTimeout 函数

我们可以在加载资源的代码中,使用 setTimeout 函数来设置超时时间。当超出设定的时间后,我们可以手动中断请求。

-- -------------------- ---- -------
----- --- - --- --------
---------- - ---------- -
  -- ------------
--
----------- - ---------- -
  -- ------------
--
------- - ------------

--------------------- -
  -- --------------- - -- ---------
    ------- - --- -- ----
    -- --------
  -
-- ------ -- ----------

上面的代码表示当图片加载超过5秒钟时,将中断请求并执行超时处理代码。

使用 AbortController 对象

我们也可以使用 AbortController 对象来实现超时控制。该对象提供了一个 abort 方法,可以中断请求。

-- -------------------- ---- -------
----- ---------- - --- ------------------
----- ------ - ------------------

----- --- - --- --------
---------- - ---------- -
  -- ------------
--
----------- - ---------- -
  -- ------------
--
------- - ------------

--------------------- -
  ------------------- -- ----
  -- --------
-- ------ -- ----------

------------ - ------ ---------------- -- -
  -- ------
-------------- -- -
  -- ----------- --- ------------- -
    -- -----
    -- --------
  - ---- -
    -- ------
  -
---

上面的代码表示当请求超过5秒钟时,将中断请求并执行超时处理代码。注意,使用 AbortController 对象需要配合 fetch 函数使用。

总结

本文介绍了两种解决外部资源加载问题的技术:降级图片和超时控制。通过这些技术,我们可以提高用户体验,避免页面出现空白

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/31221

纠错
反馈