Vue で画像の遅延読み込み命令をカスタマイズするにはどうすればよいですか? Vue2のカスタムイメージ遅延読み込み命令「v-lazy」については、以下の記事で詳しく紹介していますので、お役に立てれば幸いです。
個人ブログのフロントエンド ページを開発していたとき、Web サイトの応答速度を最適化したいと考えていました。そのため、遅延読み込み効果を実現したいと考えていました。画像。
カスタム コマンド v-lazy を使用してこのコマンドを実装しました。そのため、このコマンドの開発プロセスとその問題の解決策を共有したいと思います。 [関連する推奨事項: vuejs ビデオ チュートリアル ]
1. 関連する主な知識の説明
カスタム イメージの遅延読み込み手順には、主に次の内容が含まれます。 3 つのブロックの知識:
Vue2 のカスタム命令- モジュール間の通信にイベント バスを使用する
- 使用する Web API
Element .clientHeight- Element.getBoundingClientRect()
-
これらのナレッジポイントを以下で 1 つずつ紹介します。
1.1 Vue2のカスタム命令
以下にカスタム命令を簡単に紹介しますが、詳しい紹介は
Vue公式サイトのカスタム命令を参照してください。 。
1.1.1 命令オブジェクトのフック関数
bind: 命令が初めて要素にバインドされるときに 1 回だけ呼び出されます。ここではワンタイムの初期化設定を行うことができます。 - inserted: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードのみが存在することが保証されますが、必ずしもドキュメントに挿入されるわけではありません)。
- update: コンポーネントの VNode が更新されるときに呼び出されますが、その子 VNode が更新される前に発生する場合もあります。ディレクティブの値は変更されている場合もあれば、変更されていない場合もあります。更新前後の値を比較することで、不要なテンプレートの更新を無視できます（フック関数のパラメータの詳細は下記を参照）。
- componentUpdated: 命令が配置されているコンポーネントのすべての VNode とそのサブ VNode が更新された後に呼び出されます。
- unbind: 命令が要素からバインドされていないときに、1 回だけ呼び出されます。
-
フック関数のパラメータは主に、
el、binding、vnode、oldVnode の 4 つです。
1.1.2 フック関数パラメータ
el: 命令にバインドされた要素を使用して、DOM を直接操作できます。 - binding: 次のプロパティを含むオブジェクト:
name: v- プレフィックスを除いた命令名。 - value: ディレクティブのバインディング値 (例: v-my-directive="1 1"、バインディング値は 2)。
- oldValue: 命令バインディングの以前の値。update フックとcomponentUpdated フックでのみ使用できます。値が変更されているかどうかに関係なく使用できます。
- expression: 文字列形式の命令式。たとえば、v-my-directive="1 1" の場合、式は「1 1」になります。
- arg: コマンドに渡されるパラメータ (オプション)。たとえば、v-my-directive:foo の場合、パラメーターは「foo」です。
- modifiers: モディファイアを含むオブジェクト。例: v-my-directive.foo.bar では、修飾子オブジェクトは { foo: true, bar: true } です。
-
- oldVnode: 以前の仮想ノード。update フックとcomponentUpdated フックでのみ使用できます。
-
1.2 モジュール間の通信にイベント バスを使用する
イベント バスに詳しくない方は、このブログを参照してください。
Vue イベント バス(EventBus)。
イベント バス上のイベントをリッスンする --- $on メソッドを呼び出します- イベント バス上でイベントをトリガーする --- $emit メソッドを呼び出します
- リスニング イベントをキャンセルします バス上のイベント --- $off メソッドを呼び出します
-
vue サンプルを使用してイベント バスを実装することも、独自にカプセル化することもできます。私は最初のメソッドを使用しました。
イベント バス構成ファイル ---
eventBus.js のコードは次のとおりです:
import Vue from "vue";
const eventBus = new Vue({});
/*
* 事件名：mainScroll
* 含义：主区域滚动条位置变化后触发
* 参数：
* - 滚动的dom元素，如果是undefined，则表示dom元素已经不存在
*/
//在Vue.prototype原型上注册事件总线，方便vue实例对象监听和触发
Vue.prototype.$bus = eventBus;
//导出事件总线，方便在其他js模块监听和触发事件总线上的事件
export default eventBus;ログイン後にコピー
1.3 使用する Web API
1.3.1 Element.clientHeight
まず第一に、
Element.clientHeight は、次の特性を持つ 読み取り専用プロパティです。 :
- 对于那些没有定义 CSS 或者内联布局盒子的元素，该 API 会返回 0；
- 对于根元素（html 元素）或怪异模式下的 body 元素，该 API 将返回视口高度（不包含任何滚动条）
- 其他情况，该 API 会返回元素内部的高度（以像素为单位），包含
content与padding，不包含border、margin与水平滚动条（如果存在）。
另外改 API 会将获取的值四舍五入取整数。如果你需要小数结果，可以使用 element.getBoundingClientRect()方法。
示例图如下：
该 API 的详细文档可参照MDN - Element.clientHeight。
1.3.2 Element.getBoundingClientRect()
Element.getBoundingClientRect()方法返回一个DOMRect对象，其提供了元素的大小及其相对于视口的位置。
该方法无参数，返回值为DOMRect对象，该对象的属性以下几个：
- width：就是元素自身宽度
- height： 元素自身高度
- left(x)：元素开始位置到窗口左边的距离
- right： 元素的右边到窗口左边的距离
- bottom： 元素的下边到窗口上边的距离
- top(y)： 元素的上边到窗口上边的距离
- x 和 y 相当于 left 和 top
示意图如下：
该 API 的详细文档可以参照MDN - Element.getBoundingClientRect()
2.图片懒加载指令的基本介绍
2.1 最终的实现效果
最终效果如下图：
2.2 图片懒加载指令的注册与使用
由于在个人博客系统中图片懒加载指令使用的比较频繁，使用我选择了全局注册该指令。
另外因为我使用事件总线这方法来自己通信，使用还需引入事件总线配置文件---eventBus.js
所以 main.js入口文件的代码如下：
import Vue from "vue";
import App from "./App.vue";
import "./eventBus"; //引入事件总线
import vLazy from "./directives/lazy";
Vue.directive("lazy", vLazy); //全局注册指令
new Vue({
render: (h) => h(App),
}).$mount("#app");ログイン後にコピー
使用 v-lazy 指令的示例代码如下:
<template>
<div>
<ul>
<li>
<img alt="Vue2 で画像の遅延読み込み命令をカスタマイズする手順を段階的に説明します。" >
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
imgs: [
{
id: "",
src: "",
alt: "",
title: "",
},
],
};
},
//下面的代码可以用组件混入来进行封装，从而优化代码结构
methods: {
//触发mainScroll事件
handleMainScroll() {
this.$bus.$emit("mainScroll", this.$refs.container);
},
},
mounted() {
//监听滚轮事件
this.$refs.container.addEventListener("scroll", this.handleMainScroll);
},
beforeDestroy() {
this.$bus.$emit("mainScroll");//参数传入undefined，表示dom元素已经不存在
//取消监听滚轮事件
this.$refs.container.removeEventListener("scroll", this.handleMainScroll);
},
};
</script>ログイン後にコピー
3. 实现图片懒加载的原理
要实现图片懒加载效果，我们首先要思考以下四个关键问题：
3.1 如何监听容器的滚动条的滚动？
对于这问题，由于我的博客系统在处理其他组件之间的传值问题时，使用了事件总线方法，所以为了方便，我也使用这一方法，当然大家可以针对实际场景使用其他方法来解决这问题。
所以我们要在 v-lazy 图片懒加载指令配置文件---lazy.js文件中监听事件总线 eventBus 中的mainScroll事件,同时为了性能优化，我们需要进行 mainScroll 事件的事件防抖。
其中事件防抖工具函数---debounce.js代码如下:
/**
* @param {Function} fn 需要进行防抖操作的事件函数
* @param {Number} duration 间隔时间
* @returns {Function} 已进行防抖的函数
*/
export default function (fn, duration = 100) {
let timer = null;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
fn(...args);
}, duration);
};
}ログイン後にコピー
图片懒加载指令配置文件---lazy.js该部分代码如下：
import eventBus from "@/eventBus"; //引入事件总线
import { debounce } from "@/utils"; //引入函数防抖工具函数
// 调用setImages函数，就可以处理那些符合条件的图片
function setImages() {}
//监听事件总线中的mainScroll事件，该事件触发时调用setImages函数来加载图片
eventBus.$on("mainScroll", debounce(setImages, 50));ログイン後にコピー
3.2 使用自定义指令哪些钩子函数？
经过场景分析，我选用了inserted和unbind这两个钩子函数,当 img 元素刚插入父节点时收集 img 的信息，并在内部使用一个 imgs 数组存储已收集到的信息，当指令与元素解绑时，进行 imgs 数组清空操作。
另外我们还需获取图片 img 元素的 DOM 节点和 src 属性值
- 由于我们将指令绑定到了 img'元素上，所以可通过自定义指令钩子函树中的
el参数得到其 DOM 节点
- 由于我们将 src 值传给了指令，所以可通过
bindings.value参数得到其 src 属性值
所以此时图片懒加载指令配置文件---lazy.js该部分代码如下：
import eventBus from "@/eventBus"; //引入事件总线
import { debounce } from "@/utils"; //引入函数防抖工具函数
// 调用setImages函数，就可以处理那些符合条件的图片
function setImages() {}
//监听事件总线中的mainScroll事件，该事件触发时调用setImages函数来加载图片
eventBus.$on("mainScroll", debounce(setImages, 50));
//上面代码是3.1 如何监听容器的滚动条的滚动？
//下面代码是3.2 使用自定义指令哪些钩子函数？
let imgs = []; //存储收集到的的图片信息 当图片加载好后删除该图片信息
//调用setImage函数，就可以进行单张图片的加载
function setImage(img) {}
export default {
inserted(el, bindings) {
//刚插入父节点时 收集img节点信息
const img = {
dom: el, //img 元素DOM节点
src: bindings.value, //img的src属性值
};
imgs.push(img); //先将图片信息存储到imgs数组
setImage(img); // 立即判断该图片是否要加载
},
unbind(el) {
//解绑时 删除 imgs 中的所有图片信息
imgs = imgs.filter((img) => img.dom !== el);
},
};ログイン後にコピー
3.3 如何判断图片 img 元素是否在用户的可见范围内？
对于上面这问题，我们先进行问题拆分：
1、获得用户的可见范围（视口）
2、获得图片 img 元素的位置信息
- 我使用了
Element.getBoundingClientRect()这 API。
3、判断图片 img 元素是否在视口内
- img.getBoundingClientRect().top > 0 时，说明图片在视口内或视口下方
- 当 img.getBoundingClientRect().top
- 反之则不在视口内
- img.getBoundingClientRect().top
- 当-img.getBoundingClientRect().top
- 反之则不在视口内
图片懒加载指令配置文件---lazy.js该部分代码如下：
import eventBus from "@/eventBus"; //引入事件总线
import { debounce } from "@/utils"; //引入函数防抖工具函数
let imgs = []; //存储收集到的的图片信息
// 调用setImages函数，就可以处理那些符合条件的图片
function setImages() {
for (const img of imgs) {
setImage(img); // 处理该图片
}
}
//监听事件总线中的mainScroll事件，该事件触发时调用setImages函数来加载符合条件图片
eventBus.$on("mainScroll", debounce(setImages, 50));
//当图片加载好后删除该图片信息
export default {
inserted(el, bindings) {
//刚插入父节点时 收集img节点信息
const img = {
dom: el, //img 元素DOM节点
src: bindings.value, //img的src属性值
};
imgs.push(img); //先将图片信息存储到imgs数组
setImage(img); // 立即判断该图片是否要加载
},
unbind(el) {
//解绑时 删除 imgs 中的所有图片信息
imgs = imgs.filter((img) => img.dom !== el);
},
};
//上面代码是3.1 如何监听容器的滚动条的滚动？+ 3.2 使用自定义指令哪些钩子函数？
//下面代码是3.3 如何判断图片 img 元素是否在用户的可见范围内？
//调用setImage函数，就可以进行单张图片的加载
function setImage(img) {
const clientHeight = document.documentElement.clientHeight; //视口高度
const rect = img.dom.getBoundingClientRect(); //图片的位置信息
//取默认值150 是为了解决图片未加载成功时高度缺失的问题
const height = rect.height || 150; //图片的高度
// 判断该图片是否在视口范围内
if (rect.top >= -height && rect.top <h3 data-id="heading-16"><strong>3.4 如何处理图片 img 元素的加载？</strong></h3><p>由效果图我们可看出一开始所有 img 元素都是一张默认的 GIF 图片---<code>defaultGif</code>，等该 img 元素进入到视口范围时，开始加载该图片，加载完成后再进行替换。</p><p>这里我还进行一个优化操作，就是先新建一个 <code>Image 对象实例</code>，代替 img 元素加载图片，因为图片加载完成后会触发<code>onload事件</code>，所以我们只需对<code>onload事件</code>进行改写,在其内部执行 img 元素的 src 属性替换操作，这样就解决了加载过程中图片空白的情况。</p><p>所以图片懒加载指令配置文件---<code>lazy.js</code>完整的代码如下：</p><pre class="brush:php;toolbar:false">import eventBus from "@/eventBus"; //引入事件总线
import { debounce } from "@/utils"; //引入函数防抖工具函数
import defaultGif from "@/assets/default.gif"; //在assets静态文件夹下放入默认图
let imgs = []; //存储收集到的且未加载的图片信息
//调用setImage函数，就可以进行单张图片的加载
function setImage(img) {
img.dom.src = defaultGif; // 先暂时使用默认图片
const clientHeight = document.documentElement.clientHeight; //视口高度
const rect = img.dom.getBoundingClientRect(); //图片的位置信息
//取默认值150 是为了解决图片未加载成功时 高度缺失的问题
const height = rect.height || 150; //图片的高度
// 判断该图片是否在视口范围内
if (-rect.top i !== img); //将已加载好的图片进行删除
}
}
// 调用setImages函数，就可以处理那些符合条件的图片
function setImages() {
for (const img of imgs) {
setImage(img); // 处理该图片
}
}
//监听事件总线中的mainScroll事件，该事件触发时调用setImages函数来加载符合条件图片
eventBus.$on("mainScroll", debounce(setImages, 50));
//当图片加载好后删除该图片信息
export default {
inserted(el, bindings) {
//刚插入父节点时 收集img节点信息
const img = {
dom: el, //img 元素DOM节点
src: bindings.value, //img的src属性值
};
imgs.push(img); //先将图片信息存储到imgs数组
setImage(img); // 立即判断该图片是否要加载
},
unbind(el) {
//解绑时 清空 imgs
imgs = imgs.filter((img) => img.dom !== el);
},
};ログイン後にコピー
（学习视频分享：web前端开发、编程基础视频）
以上がVue2 で画像の遅延読み込み命令をカスタマイズする手順を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
