hilongjw / vue-lazyload Goto Github PK
View Code? Open in Web Editor NEWA Vue.js plugin for lazyload your Image or Component in your application.
Home Page: http://hilongjw.github.io/vue-lazyload/
License: MIT License
A Vue.js plugin for lazyload your Image or Component in your application.
Home Page: http://hilongjw.github.io/vue-lazyload/
License: MIT License
_.on('transitionend', lazyLoadHandler); => _.off('transitionend', lazyLoadHandler);
When using webpack this is adding 34kb too my app file (not minified). But considering it's only 206kb before and 242kb after this is still huge increase. Even minified it would be around 15kb. I guess from using the promise lib? Is it necessary to include all this extra baggage?
vue SPA 中引入 vue-lazyload 会在QQ系列内核.UC系列内核,原生chrome无影响无法访问!
I get this error since updating to the most recent version
SyntaxError: Unexpected identifier 'last'
Edit: build works for me in 0.4.3
图片的src是计算属性要怎么办?
有时候一个网页展示了很多图,屏幕也很长,如果一开网页,就全部开始加载, 就可能影响网页下载其他东西,可能会网页卡顿什么的
所以想问问,有没有让他不加载屏幕之外的图
当网页快滚动到了,才开始加载呢
懒加载
<ul id="container">
<li v-for="img in list">
<div v-lazy.container:background-image="img"></div>
</li>
</ul>
The code above dosen't work , it rendered:
<div src="imgurl"></div>
instead of
<div style="background-image:'url(...)'"></div>
SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
在滚动条滚动的过程中,即使滚动条已经到了指定的位置,图片占位符已经出现在window上,但是图片仍然不会加载出来,一定要在滚动条静止后才开始显示图片,我觉得这是一个可以优化的地方。
有一个list,下拉获取历史消息,需要将新数据插入到list前面,因为之前已经对list中图片作了处理,再次更新list数据,前面追加的图片显示的还是历史图片
我通过v-for生成的列表,用了vue-lazyload,当我操作想删除列表中的一项时报下面的错?请问有方法解决吗?
vue.common.js:1019 [Vue warn]: Failed to resolve directive: lazy (found in component: )
vue-lazyload.es5.js:112 Uncaught TypeError: Cannot read property 'el' of undefined
@hilongjw 请问,lazyload可以用组件或者filters的方式加载么,demo里面只看到插件方式
Hi, thanks for the plugin.
But when i try to add v-lazy:background-image a got this error. I'm using vue 1.0.20. Any suggestions ?
两个页面反复切换后,未加载的图片会重复添加到listeners
vue-lazyload Version: 0.4.2
Demo:http://getcrx.cn
操作:
json
,搜索结果中的图标没能正常加载搜索的实现方式:
<div class="item" v-for="item in list | filterBy keyword in 'name' 'introduce' 'app_id' ">
<img v-lazy="item.logo">
</div>
lazy-loading seems to work fine on the first route when using vue-router. However, when you navigate to another route, only the images that load up in the viewport will load. The rest continue to show the loading image.
Edit: Actually, I just updated to your most recent commit and it seems to be working nicely now. Thank you! 👍
Hello @hilongjw,
I have been using this package and found that if the images container have been restricted toa fixed height and allowing overflow vertically, the lazyloading doesn't seem to work.
Do you guys have any suggestions. Let me know if you need anything else.
{{dish.title}}
Hi.
I am unable to get this plugin to work in Vue 2.0.5
// Initialization
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload);
My .vue template file
<template>
<a v-on:click="alert('clicked')">
<img v-lazy="imgUrl" :alt="Image alt text">
</a>
</template>
<script>
export default {
data(){
return {
imgUrl: 'http://vignette4.wikia.nocookie.net/warframe/images/2/26/Derelict_Black.png/revision/latest?cb=20140914094121'
}
}
</script>
The generated output:
<a><img alt="Image alt text"></a>
And the image is never loaded
:style='{borderColor: supportColorRgba}' v-lazy:background-image="avatar"
类似以上的写法会导致:style样式应用失效
when vue-lazyload be used,the oderBy function works not,that mean the Buffer can't be refresh
是不是应该 var winH = window.screen.availHeight
而且没有考虑移动端DPR变化的情况,我们根据DPR做适配了,所以后面还要乘以window.devicePixelRatio
vivo Xplay5A
Android: v5.1.1
vivo ROM: Funtouch OS v2.5.1
Sofeware Version: v1.12.16
userAgent: Mozilla/5.0 (Linux; Android 5.1.1; vivo Xplay5A Build/LMY47V) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/38.0.0.0 Mobile Safari/537.36
ERROR in build.bf062f81a70c821ad4dc.js from UglifyJs
SyntaxError: Unexpected token: name (last) [./~/vue-lazyload/vue-lazyload.es5.js:22,0]
vue-lazyload.es5.js:22,0:
const debounce = function(action, idle) {
let last
return function() {
let args = arguments
clearTimeout(last)
last = setTimeout(() => {
action.apply(this, args)
}, idle)
}
}
Can you please add some event or method to add some code once image is loaded/rendered
for exemple, I'd like to use an object-fit polyfill for ie :( (https://github.com/bfred-it/object-fit-images)
and I have to run objectFitImages(); once my img tag is rendered...
Exept this, your directive is awesome :)
根据README.md 的使用说明,我在实际的例子里lazyload Img 并没有预想那样工作,请问有具体的实例吗?
一下是使用lazyload component
<template>
<section >
<div class="luxury-items" v-for="item in list" track-by="$index">
<a v-bind:href="item.commodity_link">
<div class="commodity-img"><img v-lazy="item"></div>
</a>
</div>
</section>
</template>
<script>
import Vue from 'vue';
import lazyload from 'vue-lazyload';
Vue.use(lazyload, {
error: 'dist/error.png',
loading: 'dist/loading.gif',
try: 3 // default 1
})
export default {
data () {
return {
list: [
'http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg',
'http://fuss10.elemecdn.com/3/1e/42634e29812e6594c98a89e922c60jpeg.jpeg',
'http://fuss10.elemecdn.com/1/c5/95c37272d3e554317dcec1e17a9f5jpeg.jpeg',
'http://fuss10.elemecdn.com/7/85/e478e4b26af74f4539c79f31fde80jpeg.jpeg',
'http://fuss10.elemecdn.com/b/df/b630636b444346e38cef6c59f6457jpeg.jpeg',
'http://fuss10.elemecdn.com/7/a5/596ab03934612236f807b92906fd8jpeg.jpeg',
]
}
}
}
</script>
Hi,
I'm having a couple of issues that I hope you can help with, firstly the code at the bottom of this issue is throwing an error on Safari (on MBP)
SyntaxError: Unexpected use of reserved word 'let' in strict mode
img: new Set(),
/* set the img show with it state */
show() {
let self = this; <- this line
Also get the below error on Safari mobile (iOS iPhone 6S)
SyntaxError: Unexpected token '('. Expected a ':' following the property name 'show'.
img: new Set(),
/* set the img show with it state */
show() { <- this line
The same code works on Chrome on my MBP
This is in my js file
var Vue = require('vue');
Vue.use(require('vue-resource'));
var LazyLoad = require('vue-lazyload');
Vue.use(LazyLoad, {
error: '/assets/img/trans-1x1.png',
loading: '/assets/img/trans-1x1.png'
});
Then in my html I have
<img :height="goal.medias[0].size.height" :width="goal.medias[0].size.width" v-lazy="goal.medias[0].file_path + '/' + goal.medias[0].file_name +'?w=450'" :alt="goal.title + ' | iGerit'">
var _ = {
on: function on(type, func) {
Init.el.addEventListener(type, func);
},
off: function off(type, func) {
Init.el.removeEventListener(type, func);
}
};
var onListen = function onListen(start) {
Init.el = document.querySelector(Options.el) || window;
}
我现在这样改不知道对不对。
对于异步ajax加载的数据,src的图片无法显示。不知道有没测试过这种情况
<div class="pic" v-lazy:background-image.j-home-index="item"></div>
if (binding.modifiers) { parentEl = window.document.getElementById(Object.keys(binding.modifiers)[0]) //==> null }
把� 源 码 bind改成 inserted这样就正常了:
if (isVueNext) { Vue.directive('lazy', { // bind: addListener, inserted: addListener, update: addListener, componentUpdated: lazyLoadHandler, unbind : componentWillUnmount }) }
error和loading都设置了,但还是报错了
我把吐过来的 img 的 src 处理为 v-lazy 似乎并没有生效
页面有20张图,
有一定几率,
后面的图一直显示loading.gif
并且,没有重新尝试请求图片
配置文件,尝试次数我写的10
滚动到未加载图片的 img 处,图片背景会显示为黑色,然后再加载图片。仅在微信的 WebView 中发现有这个问题,其余浏览器环境均正常。试过 !important 之类的方式设置 background-color,问题仍然存在。
模板中的使用方式:
<img v-lazy="photoUrl">
I have user list with avatars, but this list not in window so it will be cool if directive have option to provide custom container.
不在v-for里面 加载出图片后 会再次出现错误提示的图片
Hey,
Thanks @Leopoldthecoder @hilongjw, for considering my issue
Thanks for the prompt response - but I still find that only 12 images do load properly, rest of the images are set with the source of the loading image.
Any insights on this?
Let me know then.
Is there anyway to use this without webpack (standalone in browser)
I tried including vue-lazyload-es5.js but Vue.lazyload is not defined
After update to latest version (0.4.7), I meet this error from UglifyJs SyntaxError: Unexpected token: name (last) [./~/vue-lazyload/vue-lazyload.es5.js:22,0]
when run webpack -p
发现目前只能使用绝对路径的图片。
某些原因,需要懒加载的图片是本地的一些资源,通过相对路径的方式引入./img/pic1.jpg
这个可以实现吗
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.