Lazy load
图片懒加载指令。
引入
import { Lazyload } from ‘mint-ui‘;
Vue.use(Lazyload);
例子
为 img 元素添加 v-lazy 指令，指令的值为图片的地址。同时需要设置图片在加载时的样式。
<ul>
<li v-for="item in list">
<img v-lazy="item">
</li>
</ul>
image[lazy=loading] {
width: 40px;
height: 300px;
margin: auto;
}
若列表不在 window 上滚动，则需要将被滚动元素的 id 属性以修饰符的形式传递给 v-lazy 指令
<div id="container">
<ul>
<li v-for="item in list">
<img v-lazy.container="item">
</li>
</ul>
</div>
-------------------------------------------------------------------------------------------
<li>------------positition: relation
文字-------.info {
position: absolute;
bottom: 0;
}
设置文字的最大高度
max-height: 84px;
<!-- 图片的列表区域 --> <ul class="lazyul"> <router-link tag="li" v-for="item in photolist" :key="item.id" :to="‘/home/photoinfo/‘ + item.id"> <!-- 注意： v-lazy 要指定图片的地址 --> <img v-lazy="item.img_url"> <div class="info"> <h1 class="info-title">{{ item.title }}</h1> <div class="info-content">{{ item.zhaiyao }}</div> </div> </router-link> </ul>
<style>
</style>
图片的懒加载----------文字悬浮于图片上----设置文字的最大高度---图片的li相对定位---文字绝对定位
原文：https://www.cnblogs.com/fdxjava/p/11641269.html