lazy load favicons

This commit is contained in:
Nazar Kanaev 2020-09-09 21:20:00 +01:00
parent c72c0678a9
commit dc572f9b5b
3 changed files with 11 additions and 2 deletions

View File

@ -120,7 +120,7 @@
<input type="radio" name="feed" :value="'feed:'+feed.id" v-model="feedSelected"> <input type="radio" name="feed" :value="'feed:'+feed.id" v-model="feedSelected">
<div class="selectgroup-label d-flex align-items-center w-100"> <div class="selectgroup-label d-flex align-items-center w-100">
<span class="icon mr-2" v-if="!feed.has_icon">{% inline "rss.svg" %}</span> <span class="icon mr-2" v-if="!feed.has_icon">{% inline "rss.svg" %}</span>
<span class="icon mr-2" v-else><img :src="'/api/feeds/'+feed.id+'/icon'" alt=""></span> <span class="icon mr-2" v-else><img v-lazy="'/api/feeds/'+feed.id+'/icon'" alt=""></span>
<span class="flex-fill text-left text-truncate">{{ feed.title }}</span> <span class="flex-fill text-left text-truncate">{{ feed.title }}</span>
<span class="counter text-right">{{filteredFeedStats[feed.id] || ''}}</span> <span class="counter text-right">{{filteredFeedStats[feed.id] || ''}}</span>
</div> </div>
@ -312,7 +312,7 @@
<div v-for="feed in folder.feeds" class="list-row d-flex align-items-center" :key="feed.id"> <div v-for="feed in folder.feeds" class="list-row d-flex align-items-center" :key="feed.id">
<div class="w-100 text-truncate"> <div class="w-100 text-truncate">
<span class="icon mr-2" v-if="!feed.has_icon">{% inline "rss.svg" %}</span> <span class="icon mr-2" v-if="!feed.has_icon">{% inline "rss.svg" %}</span>
<span class="icon mr-2" v-else><img :src="'/api/feeds/'+feed.id+'/icon'" alt=""></span> <span class="icon mr-2" v-else><img v-lazy="'/api/feeds/'+feed.id+'/icon'" alt=""></span>
{{ feed.title }} {{ feed.title }}
</div> </div>
<div class="flex-shrink-0"> <div class="flex-shrink-0">
@ -357,6 +357,7 @@
<script src="./static/javascripts/url-polyfill.min.js"></script> <script src="./static/javascripts/url-polyfill.min.js"></script>
<!-- external --> <!-- external -->
<script src="./static/javascripts/vue.min.js"></script> <script src="./static/javascripts/vue.min.js"></script>
<script src="./static/javascripts/vue-lazyload.js"></script>
<script src="./static/javascripts/popper.min.js"></script> <script src="./static/javascripts/popper.min.js"></script>
<script src="./static/javascripts/bootstrap-vue.min.js"></script> <script src="./static/javascripts/bootstrap-vue.min.js"></script>
<script src="./static/javascripts/Readability.js"></script> <script src="./static/javascripts/Readability.js"></script>

View File

@ -43,6 +43,8 @@ var sanitize = function(content, base) {
return sanitizer.sanitize(content, {FORBID_TAGS: ['style'], FORBID_ATTR: ['style', 'class']}) return sanitizer.sanitize(content, {FORBID_TAGS: ['style'], FORBID_ATTR: ['style', 'class']})
} }
Vue.use(VueLazyload)
Vue.directive('scroll', { Vue.directive('scroll', {
inserted: function(el, binding) { inserted: function(el, binding) {
el.addEventListener('scroll', debounce(function(event) { el.addEventListener('scroll', debounce(function(event) {

File diff suppressed because one or more lines are too long