HBuilder 图片懒加载原始封装

HBuilder 中可以使用 MUI 框架自带的图片懒加载组件，也可以使用第三方库 lazyload.js 进行图片懒加载。

使用 MUI 框架自带的图片懒加载组件，需要在页面中引入 mui.lazyload.js 文件，并在需要懒加载的图片标签上添加 data-lazyload 属性，指定图片的真实地址，例如：

<img data-lazyload="真实图片地址" src="占位图片地址">

使用第三方库 lazyload.js 进行图片懒加载，需要在页面中引入 lazyload.js 文件，并在需要懒加载的图片标签上添加 data-original 属性，指定图片的真实地址，例如：

<img data-original="真实图片地址" src="占位图片地址" class="lazy">

同时需要在 JavaScript 中初始化 lazyload.js，例如：

$(function() {
    $("img.lazy").lazyload();
});

以上是图片懒加载的原始封装方式，您可以结合具体需求进行修改。

相关问题

图片懒加载指令封装详情

图片懒加载指令的封装详情如下：

首先，在需要懒加载的DOM元素上，使用自定义指令v-自定义指令名，并在该指令绑定的元素中设置图片路径。例如：

<RouterLink to="/" class="image">
  <img alt="" v-自定义指令名="图片路径" />
</RouterLink>

其次，需要封装一个指令函数，用于实现图片的懒加载。该函数可以导入默认显示的图片，并通过指令名称注册到Vue的应用程序中。例如：

// 导入默认显示的图片
import defaultImg from '@/assets/images/200.png'

// 指令
const defineDirective = (app) => {
  // 图片懒加载指令
  app.directive('自定义指令名', {
    mounted (el, binding) {
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
        // 判断图片是否在可视范围内
        if (isIntersecting) {
          // 在可视范围内即可取消监听
          observer.unobserve(el)

          // 如果图片加载失败，则显示默认图片，onerror错误事件
          el.onerror = () => {
            el.src = defaultImg
          }

          // 图片懒加载的核心原理 --- 图片在可视区域内即将图片路径赋值为自定义指令绑定的值，这个时候才让图片加载
          el.src = binding.value
        }
      }, {
        // 设置监控距离为图片和可视区域交叉距离为0.01时加载图片
        threshold: 0.01
      })

      // 监听绑定的DOM元素
      observer.observe(el)
    }
  })
}

然后，在全局插件注册的index.js文件中，将该指令函数注册到Vue的应用程序中。例如：

export default {
  install (app) {
    // 省略其他...
    defineDirective(app)
  }
}

这样，图片懒加载指令就封装完毕了。

vue封装图片懒加载组件

根据提供的引用内容，Vue封装图片懒加载组件的实现原理如下:

1. 首先，通过全局注册组件，将懒加载组件注册到Vue中。这个懒加载组件是一个在页面加载时不立即显示的占位组件，用于提升网页性能和用户体验。
2. 然后，使用自定义指令来实现懒加载功能。这个指令可以应用在需要懒加载的图片元素上，例如`<img v-lazy="item.src" alt="" />`。
3. 在指令的逻辑中，使用`useIntersectionObserver`函数来监听图片元素是否在可视区域内。当图片元素进入可视区域时，触发回调函数。
4. 在回调函数中，停止监听，给图片元素设置`src`属性，值为要加载的图片的路径。如果加载失败，显示默认的图片。
5. 最后，在Vue的安装方法中，将懒加载组件和指令注册到Vue中，使其可以在整个Vue应用中使用。

综上所述，以上是Vue封装图片懒加载组件的实现原理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue中实现图片懒加载的方法（一）](https://blog.csdn.net/weixin_54145360/article/details/127789692)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [【Vue3】 vue3图片懒加载-封装自定义指令](https://blog.csdn.net/weixin_46862327/article/details/129035539)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]