美文网首页
图片懒加载

图片懒加载

作者: Jycoding | 来源:发表于2022-04-23 23:45 被阅读0次

目的: 当图片进入可视区域内去加载图片,且处理加载失败,封装成指令。

介绍一个webAPI:IntersectionObserver(opens new window)

// 创建观察对象实例

const observer = new IntersectionObserver(callback[, options])

// callback 被观察dom进入可视区离开可视区都会触发

// - 两个回调参数 entries , observer

// - entries 被观察的元素信息对象的数组 [{元素信息},{}],信息中isIntersecting判断进入或离开

// - observer 就是观察实例

// options 配置参数

// - 三个配置属性 root rootMargin threshold

// - root 基于的滚动容器,默认是document

// - rootMargin 容器有没有外边距

// - threshold 交叉的比例

// 实例提供两个方法

// observe(dom) 观察哪个dom

// unobserve(dom) 停止观察那个dom

基于vue3.0和IntersectionObserver封装懒加载指令

src/components/library/index.js

export default {

  install (app) {

    app.component(XtxSkeleton.name, XtxSkeleton)

    app.component(XtxCarousel.name, XtxCarousel)

    app.component(XtxMore.name, XtxMore)

+    defineDirective(app)

  }

}

import defaultImg from '@/assets/images/200.png'

// 指令

const defineDirective = (app) => {

  // 图片懒加载指令

  app.directive('lazyload', {

    mounted (el, binding) {

      const observer = new IntersectionObserver(([{ isIntersecting }]) => {

        if (isIntersecting) {

          observer.unobserve(el)

          el.onerror = () => {

              el.src = defaultImg

          } 

          el.src = binding.value

        }

      }, {

        threshold: 0.01

      })

      observer.observe(el)

    }

  })

}

使用指令:

src/views/home/component/home-product.vue

        <RouterLink class="cover" to="/">

+          <img alt="" v-lazyload="cate.picture">

          <strong class="label">

            <span>{{cate.name}}馆</span>

            <span>{{cate.saleInfo}}</span>

          </strong>

        </RouterLink>

src/views/home/component/home-goods.vue

    <RouterLink to="/" class="image">

+      <img alt="" v-lazyload="goods.picture" />

    </RouterLink>

``src/views/home/component/home-product.vue`

        <RouterLink class="cover" to="/">

+          <img v-lazyload="item.picture" alt="">

          <strong class="label">

            <span>{{item.name}}馆</span>

            <span>{{item.saleInfo}}</span>

          </strong>

        </RouterLink>

总结:

在img上使用使用v-lazyload值为图片地址,不设置src属性。

相关文章

  • 项目优化

    图片懒加载,数据懒加载, 路由懒加载 1.图片懒加载原理 1.1 开始时 不设置src属性 1.2 图片在可视区域...

  • JS

    JS 懒加载,预加载 概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...

  • 图片懒加载

    懒加载与预加载的基本概念。 懒加载也叫延迟加载:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预...

  • 图片懒加载

    图片懒加载 图片懒加载在一些图片密集型的网站中运用比较多,通过图片懒加载可以让一些不可视的图片不去加载,避免一次性...

  • js 实现图片懒加载

    一、懒加载 懒加载也叫延迟加载,Js中图片的延迟加载,延迟图片需要符合某些条件时才加载;对于图片过多的页面,为了加...

  • 图片懒加载和预加载

    图片懒加载的原理是什么? 首先明白为什么要懒加载: 懒加载即延迟,对于图片过多的页面,为了加快页面加载速度,我们需...

  • selenuim和phantonJs处理网页动态加载数据的爬取

    一.图片懒加载 什么是图片懒加载? 图片懒加载是一种网页优化技术。图片作为一种网络资源,在被请求时也与普通静态资源...

  • 懒加载和瀑布流

    一、简述图片懒加载的实现原理 图片懒加载 若一开始,页面上有许多的图片要加载,而如果同时加载这么多图片,会消耗性能...

  • jquery懒加载、回到顶部

    1.知识点部分: 懒加载图片的原理是什么? 图片懒加载也称为曝光加载,将页面上的图片分批加载,只有当图片出现在wi...

  • 懒加载和预加载

    1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加载:提前加载图片...

网友评论

      本文标题:图片懒加载

      本文链接:https://www.haomeiwen.com/subject/bivzertx.html