在 Vue.js 应用中，图片异步加载是一个很常见的场景。然而，这也会导致一个很不好的体验，就是当图片还未加载完成时，它们会在页面中先以占位符形式显示出来，当图片加载完成后，它们才回显示成真正的图片。这种加载方式会产生一个闪烁的效果，给用户带来不舒适的感觉。在本文中，我们将介绍 Vue.js 如何解决图片异步加载时的闪烁问题。
前置知识
在阅读本文之前，您需要了解以下基础知识：
- HTML
- CSS
- JavaScript
- Vue.js
什么是图片闪烁？
在图片异步加载的过程中，由于图片需要从服务器获取，所以在加载完成前，浏览器会先以占位符的形式（通常是一个灰色的方格）显示出来。这样，当一个页面中有多张图片时，用户会看到一堆灰色的方格不停地在跳动，这样便形成了“图片闪烁”的情况。
如何解决图片闪烁问题？
要解决图片闪烁问题，我们需要对异步加载图片的方式进行一些优化。以下我们将介绍两种解决方案：基于 CSS 和基于 Vue.js 的。
基于 CSS 的解决方案
我们可以通过使用 base64 编码将图片的网址直接写入页面中，这样可以避免图片的异步加载。下面是一个使用 CSS 的示例代码：
-- -------------------- ---- -------
-------
------------------ -
-------- ---
------ ------
------- ------
----------- --------------------------------- ---------------------------------- ---------- - --- ---------- ----------- ----- ----- ----------- -----------------------
-
------ -
------------------ ----------
---------------- ------
-
--------
-----
---- --------------------------------
---- ------------- ----------------------------
------上面的代码中，我们使用了一个 SVG 占位符来代替真实的图片。CSS 样式中给出了一个 image-placeholder 类，这个类的作用是在图片加载完成前显示一个占位符。当图片加载完成后，我们通过 .image 类将图片的 URL 作为背景来进行显示。
基于 Vue.js 的解决方案
如果我们想要使用 Vue.js 中的组件来实现图片异步加载，我们可以使用 v-lazy 指令。该指令可以在视图滚动到指定区域时开始异步加载图片，具体实现如下：
-- -------------------- ---- -------
----------
---- ----------------------- ---------------------
---- ------------- -------------
------
-----------
--------
------ ------- -
----- ------------
------ -
---- -------
---------- -
----- -------
-------- ---
-
--
--------- -
------------- - --- ---------------------------- -- -
----- ------- - -------
----- - -------------- - - -----
-- ---------------- -
----------------
--------------------------
-
-- -
----------- -------------------- ----
--
------------------------------------------------
--
-------- -
----------- -
----- --- - --- -------
------- - --------
---------- - -- -- -
-------------------------------------------------
-
-
-
-
---------
------ -------
---------------- -
------ -----
------- --
--------------- -------
--------- ---------
-
----------------------- ------ -
-------- --
----------- ------- ---- ------------
-
------ -
--------- ---------
---- --
----- --
------ -----
------- -----
----------- ------
-------- --
----------- -----
-
--------上面的代码中，我们创建了一个 Vue 组件 LazyImage，该组件内部使用了 IntersectionObserver 接口，当该组件出现在视窗内时，会开始异步加载图片。在图片加载完成后，我们会将 image-container 容器添加一个 loaded 类，这个类的作用是让图片透明度从 0 变为 1，从而实现图片的渐变显示。
总结
在本文中，我们介绍了如何使用基于 CSS 和基于 Vue.js 的方式来解决图片异步加载时所产生的闪烁问题。在实际开发中，您可以根据您的项目需求选择使用哪种方式。无论您选择了哪种方式，优化图片加载方式将会极大地改善用户的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646df022968c7c53b0c8f5e5