产品列表中使用v-lazyload插件懒加载img图片，但是当对产品列表重新排序（人气、销量、价格...），产品info信息改变，但是img图片没有发生变化

最新推荐文章于 2024-01-20 13:26:17 发布
最新推荐文章于 2024-01-20 13:26:17 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： vue学习总结 文章标签： 图片懒加载 v-lazyload 动态切换图片 图片无变化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g229191727/article/details/81382080
版权

产品列表中使用v-lazyload插件懒加载img图片，但是当对产品列表重新排序（人气、销量、价格...），产品info信息改变，但是img图片没有发生变化，控制台查看DOM结构，发现DOM绑定的图片链接也没有发生变化，查阅资料找到解决方法：只需在img标签中增加: key=imgUrl，即可实现img图片随数据排序的改变动态切换。

<img v-lazy="imgUrl" :key="imgUrl">

g229191727
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端性能优化之图片懒加载
qq_41595903的博客
06-20 680
1. 什么是图片懒加载？ 当访问一个网页的时候，优先显示可视区域内的图片而不是一次性加载所有的图片，但需要显示时再发送图片请求，避免网页打开时加载过多的资源。这样可以有利于前端性能优化，减轻服务器压力以及提升用户体验。 2.使用场景 当一个页面需要一次性载入很多图片时，就需要使用的图片的懒加载 3.vue中使用vue-lazyload实现图片懒加载 1.安装插件 使用npm: npm insta...
vue-tiny-lazyload-img-用于延迟加载图像的小尺寸Vue.js v.2 +指令-Vue.js开发
05-27
用于使用IntersectionObserver API演示页延迟加载图像https://mazipan.github.io/vue-:snail:vue-tiny-lazyload-img一个小尺寸的Vue.js使用IntersectionObserver API演示页面延迟加载图像的指令...
6.1 商品列表组件拆分，数据渲染，图片懒加载
05-29 212
mock数据： 图片懒加载： npm install vue-lazyload 转载于:https://www.cnblogs.com/wstmljf/p/10946018.html
vue数据更新视图不响应 --- v-lazy图片不更新？用:src绑定可以更新
zly_101的博客
06-16 925
官方文档上说： data 中存在的属性才是响应式 并且可以响应一下方式的更改： 1. = 2. $set 3. $watch 4. 。。。。。 以上都不是重点： 用了，然并卵，v-lazy要绑定key才会刷新 ...
img懒加载 自定义指令 v-lazy
最新发布
2301_81110453的博客
01-20 582
img懒加载 自定义指令 v-lazy
定义v-img-lazy自定义指令
m0_52410816的博客
06-12 256
自定义懒加载指令
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
11-27
这里的`v-lazy`指令的值是图片的URL，它会告诉`vue-lazyload`何时加载图片。 **配置选项** `vue-lazyload`提供了多种配置选项，以便根据项目需求进行定制： 1. `preLoad`：预加载比例，默认为1.3，表示在图片实际...
Vue自定义图片懒加载指令v-lazyload详解
08-30
在这个场景中，我们关注的是Vue自定义指令`v-lazyload`，它实现了图片的懒加载功能。懒加载是一种优化策略，用于提高网页性能，仅当图片进入浏览器的可视区域时才开始加载，而不是一次性加载所有图片。 首先，我们...
深入研究jQuery图片懒加载 lazyload.js使用方法
10-19
主要介绍了jQuery图片懒加载 lazyload.js使用方法，通过设置临界点,占位符,设置事件来触发加载等等来讲解lazyload.js的使用,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
v-lazy 图片懒加载指令的实现
qq_42451776的博客
10-07 787
文章目录使用实现 使用 <ul> <li v-for="(item, index) in state.imgs" :key="index" border> <div class="item"> <img v-lazy="item.url" :src="item.url" alt="" /> <p> {{ item.content }} </p>
简单的LoadimgJs
12-27
不需要任何类库的负载，简单的思路实现加载素材的方法 ,使用的是原生的javascript方法
服务器图片加载慢_页面提高性能利器_懒加载
weixin_39796533的博客
12-08 590
哈喽，艾瑞巴蒂，现在搜狗商城产品需求已经趋于稳定，已经开始逐步的着手进行页面的性能提升工作。这不最近小编正在进行“页面懒加载需求”的功能测试。小编第一次听说这个名词，让我们一起了解下吧什么是懒加载？通常的说懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次，俗称占位图)，只有当图片出现在浏览器的...
超智能vue图片懒加载之指令化管理（vue-img-lazy-load）
Emperor灬fly的博客
02-25 2071
分享一个基于vue的图片懒加载的指令插件，使用起来也是极其简易。 图片的懒加载，可以减少首页首次加载的数量，减少服务器的压力，优化用户体验，有点就不多提了，所以在app里使用图片懒加载是很必要的。 安装 npm install vue-images-lazy-load --save 使用（最开始的名字有冲突，所以使用了vue-images-lazy-loa...
Vue 图片懒加载 之 Vue-Lazyload、js原生实现原理
muzidigbig的博客
04-01 9251
通俗讲 : 懒加载就是延时加载，即当需要用到的时候再去加载。那什么叫做需要用到的时候 比如一个图片在没有出现在可视区域内，就已经加载当页面里了, 但只有滚动页面下方式才能看见, 则可以认为这个图片加载的"过早"了 懒加载的优点 可以减少首页首次加载的数量，减少服务器的压力 当网络请求比较慢的时候, 提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。 为什么使用懒加载 getBoundingClientRect()位置 IntersectionObserver
js基础之图片懒加载
夕山雨的博客
07-14 571
概述 什么是图片的懒加载？简单来说就是尽可能晚地加载图片（这里的懒，指的就是一件事只有到不得不做的时候才去做）。 举个例子，当我们在逛淘宝查看商品列表时，肯定经常遇到这种情况：如果连续向上滑动商品列表，很快就会停住（就像到了列表底部一样）。这时候如果继续向上滑动，就会出现 “加载中” 的提示，随后展示出更多的商品。这就是一个典型的懒加载案例。整个商品列表并没有在进入页面时全部加载进来，而是先加载一...
LazyImgv1.0图片延迟加载插件
牛儿吃草的博客
01-23 4150
注：LazyImg 必须定义lazy-data属性，属性值是src的图片路径 引入JS文件： 默认情况下: 在IMG中满足以任何一个条件，都会加载图片； 1、没有class属性 2、如果有class属性并且属性中不包含以"lazy-"为前缀的css样式名 如何禁止默认加载图片 JS代码: LzDefault.action = false; 如何在点击事件时显示图片 JS
v-lazy懒加载的作用与使用
热门推荐
virtrayの升级笔记
10-20 1万+
使用懒加载的目的： 当页面需要加载大量图片时（需要向下滚动页面），使用懒加载可以实现只优先加载页面可视区域的图片，从而使得页面加载更为流畅。 使用步骤： 1、安装： cnpm i vue-lazyload -S 2、main.js： import Vue from 'vue' import App from './App.vue' //添加以下两行代码 //------------------------------- import VueLazyload from 'vue-lazylo
Vue3实现图片懒加载及自定义懒加载指令
~~~
08-12 7881
图片懒加载是一种常见性能优化的方式，它只去加载可视区域图片，而不是在网页加载完毕后就立即加载所有图片，能减少很多不必要的请求，极大的提升用户体验。图片懒加载的实现原理：在图片没进入可视区域的时候，只需要让 img 标签的 src 属性指向一张默认图片，在它进入可视区后，再替换它的 src 指向真实图片地址即可。本文就分享一下在vue3中实现图片懒加载的几种方式，包括使用插件以及自定义v-lazy指令。
手写 vue-lazyload 源码，带你掌握高阶自定义指令的内部实现原理
qq_49900295的博客
08-27 1595
在 bind 这个函数中我们首先去找滚动的父级元素，然后给这个父级元素绑定事件处理函数，再给每一张图片进行类实例包装，把有用的信息全都放在图片实例里，所有图片的信息组成了一个图片池。当第一次加载的时候手动执行 handleScroll 事件，当我们滚动页面的时候执行的也是 handleScroll ，那他都做了什么事呢？看每一张图片在不在我们可视化区域内，在的话就 load，前提是这张图片没有 load 过。在 imgRender 中做的是对图片渲染的过程，其实就是添加 src 属性。...
vue-lazyload 图片懒加载
09-08
使用Vue-Lazyload，我们可以延迟加载页面中处于视口外的图片，只有当用户滚动到图片位置时才开始渲染图片。 使用Vue-Lazyload的步骤如下： 1. 首先，在你的项目中安装Vue-Lazyload插件。 2. 在main.js中引入Vue-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值