当前位置:首页 > vue技术文章 > vue-lazyload图片延迟加载插件的实例讲解

深入理解vue-lazyload图片延迟加载插件

  • 发布时间:
  • 作者:码农之家原创
  • 点击:189

这篇文章主要知识点是关于vue、lazyload、图片延迟加载、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js前端开发:快速入门与专业应用
  • 类型:前端开发大小:3.6KB MB格式:PDF作者:陈陆扬
立即下载

vue-lazyload图片延迟加载插件的实例讲解

1、首先在npm上下载vue-lazyload的引用包

npm install vue-lazyload --save-dev

2、然后我们在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可以看下图

vue-lazyload图片延迟加载插件的实例讲解

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] {
 /*width: 100px;*/
 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] {
 /*width: 100px;*/
 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] {
 /*width: 100px;*/
 background-position:center center!important;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 background-color: green;
}
/*
 or background-image
 */
 .yourclass[lazy=loading] {
 /*your style here*/
 }
 .yourclass[lazy=error] {
 /*your style here*/
 }
 .yourclass[lazy=loaded] {
 /*your style here*/
 }
</style>

以上这篇vue-lazyload图片延迟加载插件的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

如何使用python中psutil查看内存占用的情况

python中*的用法代码示例

Vue实现图片上传方式

Java虚拟机对内部锁优化方式整理

分享React 项目迁移 Webpack Babel7的实现

展开 +

收起 -

vue 相关电子书
学习笔记
网友NO.816460

浅谈vue-lazyload实现的详细过程

本文介绍了浅谈vue-lazyload实现的详细过程,分享给大家,也给自己留个笔记 首先 ,在命令行输入 npm install vue-lazyload cnpm install vue-lazyload 然后,在main.js里引入这个模块。 import 'VueLazyload' from 'vue-lazyload'Vue.use(VueLazyload,{ preload:1.3,//预加载的宽高 loading:"img的加载中的显示的图片的路径", error:"img加载失败时现实的图片的路径", attempt:3,//尝试加载的次数 listenEvents:['scroll','wheel','mousewheel','resize','animationend','transitionend','touchmove'], //你想让vue监听的事件}) 然后在app.vue的template里写一个 img v-lazy="img.src"/ 然后在app.vue的script里写 data(){ return { img:{ src:"图片的真是路径" } } } 捋一下思路: //main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import $ from 'jquery'import 'assets/bootstrap/css/boo……

网友NO.127745

Vue自定义图片懒加载指令v-lazyload详解

Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍。以下将详细介绍如何实现自定义指令v-lazyload。 先看如何使用这个指令: img v-lazyload="imageSrc" imageSrc是要加载的图片的实际路径。 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块export default (Vue , options = {})={ //初始化的选项,default是未加载图片时显示的默认图片 var init = { default: 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png' } //addListener为Vue指令的具体实现功能函数,我们这里为所有使用v-lazyload的指令的元素添加监听 //ele 是dom元素,binding是绑定的具体值, //例如:img v-lazyload="imageSrc" ele是img binding是imageSrc const addListenner = (ele,binding) ={ } //Vue自定义指……

网友NO.852733

浅谈vue中使用图片懒加载vue-lazyload插件详细指南

在vue中使用图片懒加载详细指南 , 分享给大家。具体如下: 说明 当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点。 使用方式 使用vue的 vue-lazyload 插件 插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo: 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"/scriptscript Vue.use(VueLazyload) .../script 用法 main.js 在入口文件 import Vue from 'vue'import App from './App.vue'import VueLazyload from 'vue-lazyload' //引入这个懒加载插件Vue.use(VueLazyload)// 或者添加VueLazyload 选项Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1})new Vue({ el: 'body', components: { App }}) 在入口文件添加后,在组……

网友NO.406491

vue-lazyload使用总结(推荐)

当你用vue开发的时候,不可避免的就会遇到图片懒加载的问题,之前jquery时代有jquery.lazyload.js,但是那个肯定不能用在vue的项目里。查阅资料后发现Vue-Lazyload这个插件用的频率还是比较高,最近刚好也在研究vue的懒加载,顺便也仔细研究了以下这个插件,这个插件确实能够实现懒加载,但是坑也有不少,今天就一起来看看Vue-Lazyload。 Vue-Lazyload的github地址 主要功能lt;ul li v-for="img in list" img v-lazy="img.src" /li/ul 我们现在来看看它的内部是如何实现的,首先我们进入它github上的源码可以发现它的定义: Vue.directive('lazy', { bind: lazy.add.bind(lazy), update: lazy.update.bind(lazy), componentUpdated: lazy.lazyLoadHandler.bind(lazy), unbind: lazy.remove.bind(lazy)})Vue.directive('lazy-container', { bind: lazyContainer.bind.bind(lazyContainer), update: lazyContainer.update.bind(lazyContainer), unbind: lazyContainer.unbind.bind(lazyContai……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757