在网页中，图片占据了很大的带宽和加载时间，如果可以让页面只在需要的时候再去加载图片，就可以大大提高页面的加载速度和用户的体验。这就是懒加载的概念。在 Vue.js 中，可以使用一些插件和技巧来实现图片的懒加载。
使用 vue-lazyload 组件
vue-lazyload 是一个 Vue.js 插件，用于实现图片的懒加载。它可以让你在页面滚动到图片时才加载图片，从而加快页面的加载速度，并提高用户的体验。下面是使用 vue-lazyload 的示例代码：
-- -------------------- ---- ------- ---------- ----- ---- ------------ -- ------- ---------------- ---- ------------------ -- ------ ------ ----------- -------- ------ ----------- ---- -------------- ------ ------- - ------ - ------ - ------- - - --- -- ---- ------------------------------- -- - --- -- ---- ------------------------------- -- - --- -- ---- ------------------------------- -- - - -- ----------- - ------- ---------------------- -- - ---------展开代码
在上面的代码中，我们使用了 v-for 指令来循环渲染图片，并通过 v-lazy 指令指定图片的 src。指定了 v-lazy 值的图片将只在它们被滚动到视口时才会被加载。
处理图片加载失败
有时候，图片可能因为种种原因无法加载。在这种情况下，我们可以为图片设置默认的占位符，以防止页面出现空白现象。下面是一个处理加载失败的示例代码：
-- -------------------- ---- ------- ---------- ----- ---- ------------ -- ------- ---------------- ---- ------------------ -------------------------------- -- ------ ------ ----------- -------- ------ ----------- ---- -------------- ------ ------- - ------ - ------ - ------- - - --- -- ---- ------------------------------- -- - --- -- ---- ------------------------------- -- - --- -- ---- ------------------------------- -- -- ----------- ------------------------------- - -- ----------- - ------- ---------------------- -- -------- - ----------------------- - --------- - --------------- -- -- - ---------展开代码
在上面的代码中，我们使用了 @error 事件监听器来处理图片加载失败的情况。当发生加载失败的情况时，会触发 handleImageError 方法，该方法将图片的 src 替换为错误图片的地址。
给图片添加动画效果
当图片被懒加载时，可以为它们添加一些动画效果，以增强页面的视觉效果。下面是一个添加动画的示例代码：
-- -------------------- ---- ------- ---------- ----- ---- ------------ -- ------- ---------------- ---- ------------------ --------- ---------- ------------ -- ------------------------------ -- ------ ------ ----------- ------- -------- - ----------- ------- ---- ------------ - --------------- - -------- -- - -------- -------- ------ ----------- ---- -------------- ------ ------- - ------ - ------ - ------- - - --- -- ---- -------------------------------- ------- ----- -- - --- -- ---- -------------------------------- ------- ----- -- - --- -- ---- -------------------------------- ------- ----- -- -- - -- ----------- - ------- ---------------------- -- -------- - ---------------------- - ------------ - ---- -- -- - ---------展开代码
在上面的代码中，我们使用了 CSS 过渡来实现图片的淡入效果。我们还为每张图片添加了一个 loaded 属性，用于标识图片是否已经加载完成。当图片加载完成时，我们将 loaded 属性设置为 true，通过 CSS 样式来实现淡入效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cec940e46428fe9e9726ad
