Skip to content

Commit

Permalink
new feature: loading original img
Browse files Browse the repository at this point in the history
  • Loading branch information
@hanFengSan
hanFengSan committed Jul 20, 2017
1 parent 78a0e31 commit 93b2b20
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 30 deletions.
20 changes: 20 additions & 0 deletions src/app.inject.vue
View file
Expand Up @@ -54,11 +54,31 @@
width: calc(100% - 150px);
}
}
body {
font-family: 'San Francisco', 'Helvetica', Arial, "Hiragino Sans GB", "Heiti SC",//macOS & ios
"Microsoft YaHei", //windows
'Droid Sans', // android default
'WenQuanYi Micro Hei', // linux
sans-serif;
}
.tips {
position: relative;
&:hover {
&:after {
content: attr(title-content);
position: absolute;
top: -130%;
left: 50%;
transform: translate(-50%, 0);
font-size: 12px;
padding: 2px 4px;
border-radius: 2px;
min-width: 50px;
text-align: center;
background: rgba(0, 0, 0, 0.8);
}
}
}
</style>
54 changes: 26 additions & 28 deletions src/components/AlbumScrollView.vue
View file
Expand Up @@ -22,16 +22,19 @@
<div class="loading-info" v-if="imgInfo.loadStatus!=loadStatus.error&&!imgInfo.src">...加载图片地址中...</div>
<div class="loading-info" v-if="imgInfo.loadStatus==loadStatus.error">图片加载失败, 请在图片框右下角点击刷新按钮重新尝试</div>
</div>
<div class="img-console-panel">
<!-- <div class="img-console-panel" v-if="imgInfo.loadStatus!=loadStatus.loaded"> -->
<svg class="refresh-origin-btn" viewBox="0 0 24 24" width="24" @click="getNewImgSrc(index, 'origin')" xmlns="http://www.w3.org/2000/svg">
<path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
<svg class="refresh-btn" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" title="刷新" @click="getNewImgSrc(index)">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
</svg>
<div class="img-console-panel" v-if="imgInfo.loadStatus!=loadStatus.loaded">
<div class="tips" title-content="载入原图">
<svg class="refresh-origin-btn" viewBox="0 0 24 24" width="24" @click="getNewImgSrc(index, 'origin')" xmlns="http://www.w3.org/2000/svg">
<path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</div>
<div class="tips" title-content="刷新">
<svg class="refresh-btn" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" @click="getNewImgSrc(index)">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
</svg>
</div>
</div>
</div>
</awesome-scroll-view>
Expand All @@ -41,7 +44,6 @@
<script>
import { mapGetters, mapActions } from 'vuex'
import ImgHtmlParser from 'src/service/parser/ImgHtmlParser.js'
// import Platform from 'src/service/PlatformService'
import AlbumCacheService from 'src/service/storage/AlbumCacheService.js'
import AwesomeScrollView from './base/AwesomeScrollView.vue'
Expand Down Expand Up @@ -101,13 +103,6 @@
},
watch: {
// centerIndex() {
// if (this.toggleSyncScroll) {
// if (this.curIndex !== this.centerIndex) {
// this.$refs.scrollView.ScrollTo(this.$refs.imgContainers[this.centerIndex].offsetTop - 100, 1000);
// }
// }
// }
centerIndex: {
handler: function(val, oldVal) {
if (this.toggleSyncScroll) {
Expand Down Expand Up @@ -147,14 +142,17 @@
// for lazy load img
getImgSrc(index) {
AlbumCacheService.instance
.getImgSrc(this.parser.getAlbumId(), index)
.then(src => {
if (this.imgInfoList[index].src !== src) {
this.imgInfoList[index].src = src;
this.imgInfoList[index].loadStatus = this.loadStatus.loading;
}
});
// avoid redundant getImgSrc(), overlap refreshing of 'origin'
if (this.imgInfoList[index].loadStatus !== this.loadStatus.loading) {
AlbumCacheService.instance
.getImgSrc(this.parser.getAlbumId(), index)
.then(src => {
if (this.imgInfoList[index].src !== src) {
this.imgInfoList[index].src = src;
this.imgInfoList[index].loadStatus = this.loadStatus.loading;
}
});
}
},
// refresh img
Expand Down Expand Up @@ -326,7 +324,7 @@
z-index: 1;
display: flex;
flex-direction: row;
> .refresh-btn {
.refresh-btn {
fill: $img_container_color;
height: 20px;
width: 20px;
Expand All @@ -337,7 +335,7 @@
fill: $primary_color;
}
}
> .refresh-origin-btn {
.refresh-origin-btn {
fill: $img_container_color;
height: 20px;
width: 20px;
Expand Down
3 changes: 1 addition & 2 deletions src/service/storage/AlbumCacheService.js
View file
Expand Up @@ -46,7 +46,6 @@ class AlbumCacheService {
cutDownSize() {
this.cache = {};
this.storage.setItem('cache', JSON.stringify(this.cache));
console.log('cut down size of album cache');
alert('已清洁不必要缓存,请刷新页面');
}

Expand All @@ -69,7 +68,7 @@ class AlbumCacheService {
resolve(this.cache[albumId].thumbs);
} else {
(new TextReqService(API.getIntroHtml(introUrl, 1)))
.request()
.request()
.then(text => {
let introPage = new IntroHtmlParser(text);
this.cache[albumId].thumbs = introPage.getThumbObjList(sumOfPage, albumId);
Expand Down

0 comments on commit 93b2b20

Please sign in to comment.