11<template >
2- <!-- <figure class="fm-thumbnail">
3- <transition name="fade" mode="out-in">
4- <i v-if="!src" class="far fa-file-image fa-5x pb-2" />
5- <img v-else v-bind:src="src" v-bind:alt="file.filename" class="img-thumbnail" />
6- </transition>
7- </figure>-->
8- <div class =" fm-thumbnail"
2+ <figure class =" fm-thumbnail"
93 <transition name =" fade" mode =" out-in"
104 <div class =" spinner-border spinner-border-lg text-muted my-2" v-if =" !src"
115 <span class =" visually-hidden" span >
126 </div >
137 <img v-else v-bind:src =" src" v-bind:alt =" file.filename" class =" img-thumbnail"
148 </transition >
15- </div >
9+ </figure >
1610</template >
1711
1812<script >
@@ -39,28 +33,34 @@ export default {
3933' file.timestamp' : ' loadImage'
4034 },
4135mounted () {
42- /* if (window.IntersectionObserver) {
43- const observer = new IntersectionObserver(
44- (entries, obs) => {
45- entries.forEach((entry) => {
46- if (entry.isIntersecting) {
47- this.loadImage();
48- obs.unobserve(this.$el);
49- }
50- });
51- },
52- {
53- root: null,
54- threshold: '0.5',
55- }
56- );
36+ if (window .IntersectionObserver ) {
37+ try {
38+ const observer = new IntersectionObserver (
39+ (entries ,obs )=> {
40+ entries .forEach ((entry )=> {
41+ if (entry .isIntersecting ) {
42+ this .loadImage ();
43+ obs .unobserve (this .$el );
44+ }
45+ });
46+ },
47+ {
48+ root: null ,
49+ /* threshold: '0.5',*/
50+ threshold: ' 0.1'
51+ }
52+ );
53+
54+ // add observer for template
55+ observer .observe (this .$el );
56+ }catch (e) {
57+ this .loadImage ();
58+ }
5759
58- // add observer for template
59- observer.observe(this.$el);
6060 }else {
6161this .loadImage ();
62- }*/
63- this .loadImage ();
62+ }
63+ // this.loadImage();
6464 },
6565 computed: {
6666/**