New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
v1.3.0Bug求证:v-lazy会加载超出可视区域内的图片? #372
Comments
I can only guess that the previous commenter has the same issue, but we see a similar problem in our app with the following packages: {
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build:production": "vue-cli-service build --mode production && mv dist/index.html dist/entry.html && rsync -a dist/ ../public",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"svg": "vsvg -s ./src/assets/icons -t ./src/components/icons"
},
"dependencies": {
"animate.css": "^3.7.0",
"axios": "^0.18.0",
"axios-mock-adapter": "^1.15.0",
"brotli-webpack-plugin": "^1.1.0",
"buefy": "^0.6.7",
"compression-webpack-plugin": "^2.0.0",
"html-format": "^1.0.1",
"jquery": "^3.3.1",
"md5": "^2.2.1",
"minireset.css": "0.0.3",
"mobile-detect": "^1.4.3",
"moment": "^2.22.2",
"numeral": "^2.0.6",
"portal-vue": "^1.5.1",
"query-string": "^6.2.0",
"rails-ujs": "^5.2.1",
"v-tooltip": "^2.0.0-rc.33",
"vue": "^2.5.17",
"vue-carousel": "^0.16.0-rc1",
"vue-head": "^2.1.0",
"vue-js-modal": "^1.3.26",
"vue-lazyload": "^1.2.6",
"vue-mq": "^0.2.1",
"vue-progressbar": "^0.7.5",
"vue-read-more": "^1.1.1",
"vue-router": "^3.0.1",
"vue-svg-loader": "^0.10.0",
"vue-svgicon": "^3.2.0",
"vue-zoom": "^1.1.0",
"vuex": "^3.0.1",
"webpack-manifest-plugin": "^2.0.4"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.1",
"@vue/cli-plugin-e2e-nightwatch": "^3.0.1",
"@vue/cli-plugin-eslint": "^3.0.1",
"@vue/cli-plugin-unit-mocha": "^3.0.1",
"@vue/cli-service": "^3.0.1",
"@vue/eslint-config-prettier": "^3.0.1",
"@vue/test-utils": "^1.0.0-beta.20",
"chai": "^4.1.2",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"vue-template-compiler": "^2.5.17",
"webpack-modernizr-loader": "^5.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/prettier"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
} So basically we have a page full of images having <div class="box-slider__content-inner-image-wrapper">
<div class="box-slider__content-image">
<img class="box-slider__content-img" v-lazy="top.popular_articles_daily[0].thumbnail" :key="top.popular_articles_daily[0].thumbnail" alt="IMAGE">
</div>
<div class="box-slider__content-warpper">
<div class="box-slider__content-warpper-look">
{{ top.popular_articles_daily[0].type }}
</div>
<p class="box-slider__content-warpper-text">
{{ top.popular_articles_daily[0].title }}
</p>
<p class="box-slider__content-warpper-date">
{{ top.popular_articles_daily[0].release_time | date_split_by_dot }}
</p>
</div>
<global-navigation-default-touch :isTransparent="true"></global-navigation-default-touch>
</div>
</div> But not matter what configuration I use the images are loaded eagerly! I tried using: Vue.use(VueLazyload, {
preLoad: 0.3
}); and Vue.use(VueLazyload, {
observer: true,
observerOptions: {
// If the image gets within 50px in the Y axis, start the download.
rootMargin: '50px 0px',
threshold: 0.01
}
}); to no avail. I suspect (and this is pure speculation) the latest Chrome update basically broke the plugin and rendered it pointless. I started seeing this error on the 3rd line of the code below:
var loadImageAsync = function loadImageAsync(item, resolve, reject) {
var image = new Image();
image.src = item.src;
image.onload = function () {
resolve({
naturalHeight: image.naturalHeight,
naturalWidth: image.naturalWidth,
src: image.src
});
};
image.onerror = function (e) {
reject(e);
};
}; |
------------------更新:20190628 23:14
我对比了下v1.2.6和v1.3.0版本的区别,发现把v1.2.6版本中的key: "checkInView", 这一段内容复制到v1.3.0版本中即可解决问题。如图:
为此,我录制了一个视频,链接地址:
视频演示v1.3.0版本bug重现
视频有点长,可以分段看,主要有以下三段:
00:25s,使用v1.3.0版本,页面在加载时会加载所有图片,此时bug重现了;
01:22s,改用v1.2.6版本,此时页面首次加载只有4张图片,一个loading.gif和3张图片,符合预期要求;
04:20s,开始修改v1.3.0版本,修改后实现了预期效果
------------------以下为旧内容
不知道是不是写法不对,我写了一个简单的页面,页面默认只会显示3个li,当然,我给li有最小高度230px,以确保页面的可视区域只有这3个li。换句话说:页面的可视区域图片数量为3个。如图:
但是,当我使用v-lazy加载图片后,刷新页面会导致加载所有的图片,请求中可以看到一下子加载了20+张,这并不是我想要的,请问如何修改参数?
如图:
The text was updated successfully, but these errors were encountered: