时间:2021-05-26
1、首先在npm上下载vue-lazyload的引用包
npm install vue-lazyload --save-dev2、然后我们在main.js里面import这个包,当然,单单这一个包是不够的,还得其他的文件
import Vue from 'vue';import App from './App.vue'import router from './router';import VueLazyload from "vue-lazyload"3、然后我们配置vue-lazyload
Vue.use(VueLazyload, {error: 'static/error.png',//这个是请求失败后显示的图片loading: 'static/loading.gif',//这个是加载的loading过渡效果try: 2 // 这个是加载图片数量})4、具体配置api可以看下图
html
<template> <div> <ul id="container"> <li v-for="img in list"> <img v-lazy="img"> </li> </ul> </div></template>JS
<script> export default { data () { return { list: [ 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', ] } } }</script>css
<style>//图片加载中...img[lazy=loading] { background-position:center center!important; background: url("../../../static/images/loading.gif"); background-size:100px 100px; background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}img[lazy=error] { background-position:center center!important; background: url("../../../static/images/error.png"); background-size:100px 100px; background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}img[lazy=loaded] { background-position:center center!important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: green;} .yourclass[lazy=loading] { } .yourclass[lazy=error] { } .yourclass[lazy=loaded] { }</style>以上这篇vue-lazyload图片延迟加载插件的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家讲解了javascript瀑布流代码,即js页面滚动延迟加载图片,分享给大家供大家参考,具体代码如下原生Js页面滚动延迟加载图片*{margin:
目前,主要的购物网站都采用了这种加载方式。今天在一个网友的站里发现一个图片延迟加载的插件,很好用,在这里介绍一下。先介绍一下图片延迟加载原理。我们需要先将图片的
一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记。1,需要安装vue的懒加载插件。npminstallvue-lazylo
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才
一、定义 图片延迟加载也称为懒加载,延迟加载图片或符合某些条件时才加载某些图片,通常用于图片比较多的网页。可以减少请求数或者延迟请求数,优化性能。二、呈现形式