vue图片懒加载实例

(1)效果演示

如上图所示，在正式图片没有加载出来的时候，展示，默认图片，等待正式图片加载好了，替换默认图片~~~

（2）代码演示

<template><div><div class="menu-list"><div v-for="item in news" :key="item.id" class="menu-list-item"><div><img v-lazy="item.src" class="item-pic" alt="" /><div class="label"><div :class="[`status${item.status}`, 'label-left']"></div><div :class="[`status${item.status}`, 'label-right']"></div><div class="label-text">{{ item.status | activityST }}</div></div></div></div><div class="divide-line"><div class="line"></div><div class="quadrilateral"></div><div class="middle-text">往期活动</div><div class="quadrilateral"></div><div class="line"></div></div><div v-for="(item, index) in imgsList" :key="`imgs${index}`" class="menu-list-item" @click="goActivity(item.link)"><div><img class="item-pic" v-lazy="item.src" alt="" /><div class="label"><div :class="[`status${item.status}`, 'label-left']"></div><div :class="[`status${item.status}`, 'label-right']"></div><div class="label-text">{{ item.status | activityST }}</div></div></div></div></div></div>
</template><script>
import { Button, Cell, Toast, MessageBox } from 'mint-ui';import Vue from 'vue';
import VueLazyload from 'vue-lazyload';Vue.use(VueLazyload, {preLoad: 0.1,error: 'https://img.dota2.com.cn/file/5c/02/5c02aaf4ee7c75b2155dbb94d90eae681573028796.png',loading:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573116182172&di=50934db39064f980e6c01504742593ef&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01648957dd72990000012e7e25b5c3.gif',attempt: 1,listenEvents: ['scroll']
});export default {name: 'MenuList',data() {return {imgsList: [{id: 1,name: '问卷活动',src: 'https://img.dota2.com.cn/file/67/bb/67bb43d677f1c2bce3718e354f3d184c1572942967.png',link: '',status: 0},{id: 2,name: '主播活动',src: 'https://img.dota2.com.cn/file/d2/ae/d2ae41060e1f95ccc475e63ae2d580e81572942992.jpg',link: '',status: 2},{id: 3,name: '20周年活动',src: 'https://img.dota2.com.cn/file/9e/27/9e273feb070cd34aa0520784589e45381572943034.jpg',link: '',status: 0},]};},mounted() {this.sortByKey(this.imgsList, 'id');this.sortByKey(this.news, 'id');},methods: {sortByKey(array, key) {return array.sort(function(a, b) {var x = a[key];var y = b[key];return x > y ? -1 : x < y ? 1 : 0;});}},filters: {activityST(val) {switch (val) {case 0:return '已结束';break;case 1:return '预热';break;case 2:return '进行中';break;default:return '已结束';}}}
};
</script><style lang="scss" scoped>
@import '../../../../../css/_base.scss';
.menu-list {background: linear-gradient(180deg, #14132f 0%, #0e1223 100%);&:last-child {padding-bottom: rc(50);}.divide-line {display: flex;color: #383b4c;justify-content: center;align-items: center;margin-top: 1rem;.line {height: rc(1.5);width: rc(100);background: #383b4c;}.quadrilateral {transform: rotate(135deg);background: #383b4c;width: rc(12);height: rc(12);}.middle-text {padding: 0 rc(15);}}.menu-list-item {width: 100%;.item-pic {width: 92%;height: 16rem;margin-left: 4%;border-radius: 1rem;object-fit: fill;margin-top: 2rem;box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);}.label {display: flex;color: #fff;font-size: rc(25);float: left;top: 0;margin-top: -15rem;margin-left: 1.9rem;.label-left {width: rc(80);height: rc(40);position: absolute;padding-left: rc(10);padding-top: rc(-5);z-index: 2;}.label-right {border-radius: 2.5rem;width: 3.5rem;height: 2.5rem;position: absolute;margin-left: 2.5rem;}.label-text {z-index: 2;margin-left: rc(13);font-size: rc(22);margin-left: 0.71rem;padding-top: 0.3rem;}.status0 {background: rgb(187, 174, 170);}.status1 {background: #bf4b5c;}.status2 {background: #67ae20;}}}
}
</style>

vue图片懒加载实例相关推荐

java页面展示流式图片,javascript瀑布流式图片懒加载实例解析与优化
之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒 ...
vue图片懒加载vue-lazyload
vue图片懒加载vue-lazyload 需求描述功能实现需求描述图片过大,加载缓慢,图片懒加载,添加Loading状态,优化展示效果. 功能实现 1.安装vue-lazyload npm in ...
vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案
对于vue项目而言,图片懒加载是一个常见的图片加载方案,可以优化用户体验,而vue-lazyload则是一个广泛使用的插件. 对于某些业务场景,我们需要监听图片加载失败事件,而后进行相应的处理,然 ...
Vue 图片懒加载之 Vue-Lazyload
一.什么叫懒加载通俗讲 : 懒加载就是延时加载,即当需要用到的时候再去加载. 那什么叫做需要用到的时候? 比如一个图片在没有出现在可视区域内,就已经加载当页面里了, 但只有滚动页面下方式才能看见, ...
vue——图片懒加载和禁止图片使用缓存方法
图片预加载: 图片预加载就是在网页全部加载之前提前加载图片.当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间.否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就 ...
vue图片懒加载插件vue-lazyload
插件地址:https://github.com/hilongjw/vue-lazyload demo:http://hilongjw.github.io/vue-lazyload/ 1.安装 cnpm ...
vue 图片懒加载和懒加载原理
在真实图片得到之前,展示懒加载设置的图片1.安装cnpm i vue-lazyload -S2.main.jsimport VueLazyload from 'vue-lazyload'Vue.use ...
vue-lazyload vue图片懒加载插件的使用记录
为什么80%的码农都做不了架构师?>>> 首先在下载 npm i vue-lazyload --save-dev 然后在main.js 入口文件中配置引入 import Vue ...
vue java图片懒加载_vue 实现图片懒加载功能
一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记. 1,需要安装vue的懒加载插件. npm install vue-lazyload --save-dev 2, ...

vue图片懒加载实例

(1)效果演示

（2）代码演示

vue图片懒加载实例相关推荐

最新文章

热门文章