hilongjw / vue-lazyload Goto Github PK

:style='{borderColor: supportColorRgba}' v-lazy:background-image="avatar"

类似以上的写法会导致:style样式应用失效

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?

<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 }) }

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

我通过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

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 处，图片背景会显示为黑色，然后再加载图片。仅在微信的 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.

vue-lazyload Version: 0.4.2
Demo：http://getcrx.cn
操作：

1. 打开页面，可以看到第一屏图标加载；
2. 在搜索框进行搜索，比如输入 json，搜索结果中的图标没能正常加载

搜索的实现方式：

<div class="item" v-for="item in list | filterBy keyword in 'name' 'introduce' 'app_id' ">
    <img v-lazy="item.logo">
</div>

发现目前只能使用绝对路径的图片。

某些原因，需要懒加载的图片是本地的一些资源，通过相对路径的方式引入./img/pic1.jpg

这个可以实现吗

在滚动条滚动的过程中，即使滚动条已经到了指定的位置，图片占位符已经出现在window上，但是图片仍然不会加载出来，一定要在滚动条静止后才开始显示图片，我觉得这是一个可以优化的地方。

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 SPA 中引入 vue-lazyload 会在QQ系列内核.UC系列内核，原生chrome无影响无法访问！

有时候一个网页展示了很多图，屏幕也很长，如果一开网页，就全部开始加载， 就可能影响网页下载其他东西，可能会网页卡顿什么的

所以想问问，有没有让他不加载屏幕之外的图

当网页快滚动到了，才开始加载呢

懒加载

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 :)

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'">

不在v-for里面 加载出图片后 会再次出现错误提示的图片

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.

<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>

图片的src是计算属性要怎么办？

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.

在Android的微信浏览器打开时报错！

有一个list，下拉获取历史消息，需要将新数据插入到list前面，因为之前已经对list中图片作了处理，再次更新list数据，前面追加的图片显示的还是历史图片

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)
}
}

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! 👍

我把吐过来的 img 的 src 处理为 v-lazy 似乎并没有生效

I get this error since updating to the most recent version

SyntaxError: Unexpected identifier 'last'

Edit: build works for me in 0.4.3

error和loading都设置了，但还是报错了

页面有20张图，
有一定几率，
后面的图一直显示loading.gif
并且，没有重新尝试请求图片

配置文件，尝试次数我写的10

对于异步ajax加载的数据，src的图片无法显示。不知道有没测试过这种情况

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;
}
我现在这样改不知道对不对。

_.on('transitionend', lazyLoadHandler); => _.off('transitionend', lazyLoadHandler);

是不是应该 var winH = window.screen.availHeight

而且没有考虑移动端DPR变化的情况，我们根据DPR做适配了，所以后面还要乘以window.devicePixelRatio

• ￥{{dish.price}}/份

  {{dish.quantity}}

  {{dish.title}}

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

这种方式无法在 图片后添加参数

有时候，希望在生成的图片地址后增加参数，
如图片是 1.jpg

vue-lazyload 处理后变成了

但我想在客户端动态的改变参数
如

有办法吗

when vue-lazyload be used,the oderBy function works not,that mean the Buffer can't be refresh

@hilongjw 请问，lazyload可以用组件或者filters的方式加载么，demo里面只看到插件方式

Is there anyway to use this without webpack (standalone in browser)

I tried including vue-lazyload-es5.js but Vue.lazyload is not defined

根据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>

在使用了 keep-alive后 图片不会更新