用apicloud+vue的VueLazyload实现缓存图片懒加载

<img v-lazy="remoteUrl + pics_url" class="xunjian_pics" v-for="pics_url in item.pics_text">
Vue.use(VueLazyload, {
                preLoad: 1.3,
                error: ‘../../image/error.png‘,
                attempt: 1,
                filter: {
                    progressive(listener, options) {
                        // 实现渐近式加载图片(先加载模糊的图)
                        listener.el.setAttribute(‘lazy-progressive‘, ‘true‘)//暂时不知道这个配置有什么用
                        //调用apicloud原装模块
                        api.imageCache({
                            url: listener.src
                        }, function(ret, err) {
                            if (ret.status) {
                                listener.src = ret.url;
                                console.log(listener.src);//在v-lazy中显示的图片路径
                            } else {
                                listener.src = ret.url;
                                console.log(listener.src);
                            }
                        })
                    },
                }
            });

原文地址:https://www.cnblogs.com/shark1100913/p/11187421.html

时间: 2024-10-09 13:31:03

用apicloud+vue的VueLazyload实现缓存图片懒加载的相关文章

vue 图片懒加载 vue-lazyload

在项目中,如果出现大图一时半会加载不出来 的情况确实很丑.如果是那种没有给定宽高 靠图片撑起来的等图片加载出来 再把内容挤下去的用户体验效果非常差. 在vue中 使用vue-lazyload可以实现图片懒加载 安装 npm install vue-lazyload --save 引用 main.js import vueLazy from 'vue-lazyload' Vue.use(vueLazy) index.vue <template> <div> <img v-laz

vue + vue-lazyload 实现图片懒加载

1.安装 npm i vue-lazyload -S 2.配置 main.js /***图片模板等懒加载 start ***/ import VueLazyload from 'vue-lazyload' // 404图片 import errImg from './assets/img/404.png' // loading图片 import loadingImg from './assets/img/loading-spin.svg' // 图片懒加载配置 Vue.use(VueLazylo

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

Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: <img v-lazyload="imageSrc" > imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o

Vue图片懒加载

图片懒加载的原理 先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src).当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果.这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题. 实现步骤: 1.安装插件: npm install vue-lazyload --save-dev 2. main.js引入插件: import VueLazyLoad

vue-lazyload图片懒加载的简单使用

一.vue lazyload插件: 插件地址:https://github.com/hilongjw/vue-lazyload demo:http://hilongjw.github.io/vue-lazyload/ 二.简单使用实例: 这个插件还是蛮好用的,就是感觉这个插件的开发文档有点太啰嗦了,一股脑把所有的api扩展都罗列出来,源码中并没有可以运行的实例提供. 其实这个插件做简单使用的话是很简单的,看官方文档的话反而被误导了,可以先按下边的实例实现简单引用,后边再根据开发文档做扩展. 1.

vue项目中实现图片懒加载的方法

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实现方法(使用vue的vue-lazyload插件) 1.安装插件 npm install vue-lazyload --save-dev 2.在入口文件main.js中引入并使用 import VueLazyload from 'vue-lazyload' 直接使用 Vue.use(VueLazyl

【vue】vue-cli3构建项目中实现图片懒加载

前两天正好写了文章如何用实现图片懒加载[性能优化]JS实现图片懒加载,今天在使用vue构建项目的时候就遇到了要做图片懒加载的优化需要,本想把前两天的代码直接copy过来的,后来想查查看有没有更简便的方法,果不其然,vue中直接有插件可以使用,看了下实现时候的效果,实现原理都和原生js是一样的,vue果然真香! 接下来我们来讲vue-lazyload插件的使用: 1.安装插件 cnpm i vue-lazyload -S 2.入口文件main.js中配置: import Vue from 'vue

vue 图片懒加载

//Vue 图片懒加载export default (Vue , options = {})=>{ if(!Array.prototype.remove){ Array.prototype.remove = function(item){ if(!this.length) return var index = this.indexOf(item); if( index > -1){ this.splice(index,1); return this } } } var init = { laz

Vue实现一个图片懒加载插件

前言 图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.direction.Vue图片懒加载插件实现,逐步实现一个Vue的图片懒加载插件. Vue.use() 就像开发jQuery插件要用$.fn.extent()一样,开发Vue插件我们要用Vue.use().其实就是官方内部实现的一个方法,供广大开发者灵活开发属于自己的插件.只需要按照约定好的规则开发就行. 用