Open yilingsj opened 5 years ago
补充一下: 最终我想要这种效果,页面只加载可视区域图片,滚动时再加载下面的图片
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 v-lazy
attributes in a template, something like this:
<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:
undefined:1 GET http://localhost/undefined 404 (Not Found)
Image (async) | |
-- | -- | --
| loadImageAsync | @ | vue-lazyload.esm.js?caf9:524
| (anonymous) | @ | vue-lazyload.esm.js?caf9:802
| (anonymous) | @ | vue-lazyload.esm.js?caf9:764
| image.onload | @ | vue-lazyload.esm.js?caf9:527
| load (async) | |
| loadImageAsync | @ | vue-lazyload.esm.js?caf9:526
| renderLoading | @ | vue-lazyload.esm.js?caf9:760
| load | @ | vue-lazyload.esm.js?caf9:796
| (anonymous) | @ | vue-lazyload.esm.js?caf9:1296
| _lazyLoadHandler | @ | vue-lazyload.esm.js?caf9:1290
| runCallback | @ | vue-lazyload.esm.js?caf9:476
| (anonymous) | @ | vue-lazyload.esm.js?caf9:479
| (anonymous) | @ | vue-lazyload.esm.js?caf9:1048
| (anonymous) | @ | vue.runtime.esm.js?2b0e:1833
| flushCallbacks | @ | vue.runtime.esm.js?2b0e:1754
| Promise.then (async) | |
| microTimerFunc | @ | vue.runtime.esm.js?2b0e:1802
| nextTick | @ | vue.runtime.esm.js?2b0e:1846
| add | @ | vue-lazyload.esm.js?caf9:1013
| (anonymous) | @ | vue-lazyload.esm.js?caf9:1547
| update | @ | vue-lazyload.esm.js?caf9:1546
| LazyContainer | @ | vue-lazyload.esm.js?caf9:1531
| bind | @ | vue-lazyload.esm.js?caf9:1486
| callHook$1 | @ | vue.runtime.esm.js?2b0e:6289
| _update | @ | vue.runtime.esm.js?2b0e:6211
| updateDirectives | @ | vue.runtime.esm.js?2b0e:6192
| invokeCreateHooks | @ | vue.runtime.esm.js?2b0e:5694
| createElm | @ | vue.runtime.esm.js?2b0e:5582
| patch | @ | vue.runtime.esm.js?2b0e:6087
| Vue._update | @ | vue.runtime.esm.js?2b0e:2656
| updateComponent | @ | vue.runtime.esm.js?2b0e:2784
| get | @ | vue.runtime.esm.js?2b0e:3138
| Watcher | @ | vue.runtime.esm.js?2b0e:3127
| mountComponent | @ | vue.runtime.esm.js?2b0e:2791
| Vue.$mount | @ | vue.runtime.esm.js?2b0e:7995
| init | @ | vue.runtime.esm.js?2b0e:4133
| createComponent | @ | vue.runtime.esm.js?2b0e:5604
| createElm | @ | vue.runtime.esm.js?2b0e:5551
| patch | @ | vue.runtime.esm.js?2b0e:6126
| Vue._update | @ | vue.runtime.esm.js?2b0e:2656
| updateComponent | @ | vue.runtime.esm.js?2b0e:2784
| get | @ | vue.runtime.esm.js?2b0e:3138
| Watcher | @ | vue.runtime.esm.js?2b0e:3127
| mountComponent | @ | vue.runtime.esm.js?2b0e:2791
| Vue.$mount | @ | vue.runtime.esm.js?2b0e:7995
| (anonymous) | @ | main.js?56d7:63
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+张,这并不是我想要的,请问如何修改参数? 如图: