v3的图片懒加载

最新推荐文章于 2022-04-11 16:51:13 发布
最新推荐文章于 2022-04-11 16:51:13 发布
阅读量93 收藏 1
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51708342/article/details/118919029
版权
为什么要是有图片懒加载？图片多 回到这加载速度变慢 还可能会导致请求超时 从而没有图片自定义图片实现图片懒加载(vueuse)下载 npm i vueuse/coreimport { useIntersectionObserver } from '@vueuse/core'import defaltImg from '@/assets/images/200.png'const useLazyLoad = (target, url) => { // 1. stop 是一个函数。如果调.
摘要由CSDN通过智能技术生成
为什么要是有图片懒加载？
图片多 回到这加载速度变慢 还可能会导致请求超时 从而没有图片
自定义图片实现图片懒加载(vueuse)

下载 npm i vueuse/core

import {
    useIntersectionObserver } from '@vueuse/core'
import defaltImg from '@/assets/images/200.png'
const useLazyLoad = (target, url)
最低0.47元/天 解锁文章
sunhongyu007
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 的v-if与v-show
sunhy007的博客
07-04 1万+
在Vue的内部指令中，v-show与v-if的区别，总结如下： 在Vue中，我们可以使用v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令（条件渲染）。这里所说的指令就是directive，指特殊的带有前缀v-的命令，指令的值限定为绑定表达式，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。 v-if 根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。有点类似JavaScript中的if条件判断。在Vue中除了
v3图片懒加载
weixin_68902642的博客
07-14 75
v3图片懒加载
Vue3中创建定义图片懒加载自定义指令，超详细教程，
super帅的博客
03-23 741
// 首先下载 vuevueuse/core 包 // npm i @vueuse/core // 第一步： // 再src目录下创建directive文件 // directive文件中 // 定义全局指令 import { useIntersectionObserver } from '@vueuse/core' // 导入默认占位图 import defaltImg from '@/assets/images/200.png' export default { install(app) {.
自定义安卓图片懒加载
silencefly的博客
05-28 434
这里虽然自己写代码实现图片的懒加载，可是我还是觉得应该用一些稳定的开源库去加载图片，一是文档，而是交接给别人也好理解，当然这样一个功能写在来，还是挺有意思的，特别是解耦、下载和锁机制，希望能帮到有需要的读者！end。
XpShop模板V3-003
08-23
5. **图片优化**：电商网站通常包含大量商品图片，模板可能会内置图片优化策略，如懒加载、响应式图像或压缩技术，以提高页面加载速度。 6. **SEO优化**：为了提升搜索引擎排名，XpShop V3-003可能考虑了SEO最佳...
WordPress自适应图片模板：Reeoo-V3 v3.zip
11-20
此外，JavaScript还可以用于图片懒加载技术，即在图片进入可视区域时才开始加载，降低页面初始加载时间，提高用户体验。 四、使用须知 在使用Reeoo-V3 v3模板时，有几点需要注意： 1. 安装：将模板文件上传至...
GMap V3 各种机能汇总
07-24
12. **性能优化**：GMap V3支持分块加载、懒加载等策略，以提高大型地图应用的性能。 13. **离线地图**：虽然GMap V3本身并不直接支持离线地图，但开发者可以通过第三方库或服务实现地图数据的预加载和本地存储，...
Portfolio_v3
02-26
**优化和性能**：考虑到用户体验，项目可能采用了代码分割、懒加载、优化图片大小等方法来提高加载速度和性能。React的`create-react-app`脚手架通常已经包含了这些优化策略。 **测试**：对于一个专业项目，单元...
mailchimp-模板-v3
02-24
5. **图片懒加载**：对于大型邮件，可以使用JavaScript延迟加载图片，提高加载速度。 不过，需要注意的是，由于JavaScript在邮件中的兼容性问题，最佳实践是将核心的邮件设计和功能基于HTML和CSS，而JavaScript作为...
vue 中:key 的作用
sunhy007的博客
07-21 6302
vue中在进行列表渲染的时候，会默认遵守 ‘就地复用策略’ 就地复用策略： 当在进行列表渲染的时候，vue会直接对已有的标签进行复用，不会整个的将所有的标签全部重新删除和创建,只会重新渲染数据，然后再创建新的元素直到数据渲染完为止 Vue中为v-for提供了一个属性，:key key属性可以用来提升v-for渲染的效率！，vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去 在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识. (有相同
Vue中的 ref 和 $refs
sunhy007的博客
07-04 2052
ref 有三种用法： 1、ref 加在普通的元素上，用this.￥refs.（ref值） 获取到的是dom元素 2、 ref 加在子组件上 ， 用this.￥refs.(ref值) 获取到的就是组件实例 ，可以用组件的所有方法。 在使用方法的时候直接用 this.￥refs.(ref值).方法() 就能直接用了 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 注意点： 如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ; 这点和其他属性一样，如果是固定
VueX 学习笔记 记录
sunhy007的博客
04-11 889
vuex 的个人学习笔记
vue的data为什么必须是函数？
sunhy007的博客
08-01 885
一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。 而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。 data为对象类型 function Vue() { this.data= { name: '张三', age: '21' } } //创建了一个Vue实例.
如何在vue3使用骨架屏
sunhy007的博客
07-20 680
为什么要使用 数据都都是ajax请求渲染来的 然后它可能请求的慢就会一片白 这不好 所以就要使用骨架屏了 站位 像这样 创建个组件 <template> <div class="xtx-skeleton shan" :style="{width:'100px',height:'50px'}"> <!-- 1 盒子--> <div class="block" :style="{backgroundColor:'black'}">&lt
vue2和vue3自定义指令的区别
sunhy007的博客
07-30 673
scroll 事件 事件监听要在组件销毁的时候移除 selsct
什么是EventBus？
sunhy007的博客
07-20 532
手写EventBus //eventBus.js文件 function EventBus () { //定义一个用来存储回调的对象 let eventList = {} /** * 定义on方法 * eventName 是传递进来的自定义名称 * callback 是回调函数 * 将传递进来的以键值对的形式存储到eventList中 * eventName是键，callback就是值 * */ // 事件订阅 EventBus.protot
Vue插入视频播放器之video
sunhy007的博客
07-21 492
一、video简介 video.js是一款web视频播放器，支持html5和flash两种播放方式。 官网地址 or 详细的 二、使用 1. 下载包 npm install video.js 2. 引入 在main中 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video 3. 使用 在组件中添加 <video id="myVideo" cla
vuex是用来做什么的？ 配置项有什么？怎么用的？
sunhy007的博客
08-02 448
Vuexvuex 是什么？vuex的配置项都是什么什么时候我们要使用vuex vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 Vuex 采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 Vuex有五个核心概念，state, getters, mutations, actions, modules Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-trave
react图片懒加载
最新发布
07-27
React图片懒加载是一种对网页性能优化的方式，通过延迟加载图片资源来提高页面加载速度，减轻服务器压力，节省流量。在React中，可以使用第三方库react-lazy-load-image-component来实现图片懒加载。首先，需要安装该组件，可以使用npm命令进行安装，例如：npm i --save react-lazy-load-image-component。然后，在React函数组件中，可以使用LazyLoadImage组件来实现图片懒加载。通过监听滚动事件，判断图片是否进入视图中，然后再加载图片。在组件的渲染时，添加对scroll事件的监听，并在销毁阶段取消监听，以减少页面负担。具体代码示例如下： ```javascript import React, { useEffect } from 'react'; import { LazyLoadImage } from "react-lazy-load-image-component"; export default function ImageLazyLoad() { const imgList = \[ "https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg", "https://pic1.zhimg.com/v2-e915686432f3bb45dd43705ec445352d_r.jpg", "https://www.euweb.cn/wp-content/uploads/2016/12/302636-106.jpg", "https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg", \]; useEffect(() => { const checkImages = () => { // 判断图片是否进入视图中，然后再加载图片 }; setTimeout(() => { checkImages(); }, 1); window.addEventListener('scroll', checkImages); return () => { window.removeEventListener("scroll", checkImages); }; }, \[\]); return ( <div style={{ width: "60%" }}> {imgList.map((img) => ( <LazyLoadImage src={img} width={600} height={400} alt="Image Alt" /> ))} </div> ); } ``` 在上述代码中，通过在组件的useEffect钩子中添加对scroll事件的监听，并在销毁阶段取消监听，实现了图片懒加载的效果。同时，使用LazyLoadImage组件来渲染图片，并设置图片的宽度、高度和alt属性。这样，在滚动页面时，只有当图片进入视图中时才会加载图片，从而提高页面加载速度。 #### 引用[.reference_title] - *1* *2* [react 实现图片懒加载](https://blog.csdn.net/Kmnyed/article/details/130691665)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [React懒加载:页面多图片加载优化](https://blog.csdn.net/TwelveSpring/article/details/125300867)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值