Vue懒加载(vue懒加载机构树刷新)

编辑：rootadmin

Vue懒加载 Vue懒加载

推荐整理分享Vue懒加载(vue懒加载机构树刷新)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue懒加载怎么做,vue懒加载组件,vue懒加载组件,vue懒加载原理,vue懒加载插件,vue懒加载组件,vue懒加载路由写法,vue懒加载原理,内容如对您有帮助，希望把文章链接给更多的朋友！

懒加载（LazyLoad）一直是前端的优化方案之一。简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。　　它的核心思想是：当用户想看页面某个区域时，再加载该区域的数据。这在一定程度上减轻了服务器端的压力，也加快了页面的呈现速度。　　懒加载多用于图片，因为它属于流量的大头。最典型的懒加载实现方案是先将需要懒加载的图片的src隐藏掉，这样图片就不会下载，然后在图片需要呈现给用户时再加上src属性。安装插件

npm install vue-lazyload --save (如果运行报错就卸了再用cnpm下)

npm install vue-lazyload --save一、Vue图像懒加载

(一)、引用文件　　一般在main.js全局引用，且配置好图片

//引入vue懒加载import VueLazyload from 'vue-lazyload'//方法一：没有页面加载中的图片和页面图片加载错误的图片显示// Vue.use(VueLazyload)//方法二：显示页面图片加载中的图片和页面图片加载错误的图片//引入图片import loading from '@/assets/images/load.jpg'//注册图片懒加载 Vue.use(VueLazyload, { // preLoad: 1.3, error: '@/assets/images/error.jpg',//图片错误的替换图片路径(可以使用变量存储) loading: loading,//正在加载的图片路径(可以使用变量存储) // attempt: 1})

一些参数选项配置说明：　 (二)、在组件内使用　　在入口文件里引用vue-lazyload后，在组件任何地方都可以直接使用，把 img标签里的 :src 换成 v-lazy

<li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id"> <div class="list-wrap"> <div class="p-img">  <!--

本文链接地址:https://www.jiuchutong.com/zhishi/300163.html 转载请保留说明！

上一篇：Promise的九大方法(resolve、reject、then、catch、finally、all、allSettled、race、any)你都用过那些？(promise的几种状态)

下一篇：Pytorch中的广播机制（Broadcast）(pytorch广播相乘)