commit 6b4003176dc1f378101ed3efb72920692080ef6b
author plainheart <yhen@all-my-life.cn> Sat Jul 30 20:27:24 2022 +0800
committer plainheart <yhen@all-my-life.cn> Sat Jul 30 20:27:26 2022 +0800
tree de199d806734050c1ef9785534248345eff6d331
parent 769a038af3bc62afbbb744c5a03e9ce3866e5118

fix(explore): update lazyload usage

src/explore/ExampleCard.vue

diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue
index b2876a9..cd9e82c 100644
--- a/src/explore/ExampleCard.vue
+++ b/src/explore/ExampleCard.vue
@@ -1,20 +1,11 @@
 <template>
   <div class="example-list-item">
     <a target="_blank" class="example-link" :href="exampleLink">
-      <picture class="chart-area">
+      <picture>
         <source :data-srcset="screenshotURLWebP" type="image/webp" />
         <source :data-srcset="screenshotURLPNG" type="image/png" />
-        <img
-          class="chart-area"
-          src="../asset/placeholder.jpg"
-          :data-src="screenshotURLPNG"
-        />
+        <img class="chart-area" data-src="../asset/placeholder.jpg" />
       </picture>
-      <!-- <img
-        class="chart-area"
-        src="../asset/placeholder.jpg"
-        :data-src="screenshotURL"
-      /> -->
     </a>
     <div>
       <div class="example-langs">

src/explore/Explore.vue

diff --git a/src/explore/Explore.vue b/src/explore/Explore.vue
index cac1c67..6828252 100644
--- a/src/explore/Explore.vue
+++ b/src/explore/Explore.vue
@@ -65,7 +65,7 @@
 <script>
 import CHART_LIST from '../data/chart-list-data';
 import CHART_LIST_GL from '../data/chart-list-data-gl';
-import { EXAMPLE_CATEGORIES, BLACK_MAP, URL_PARAMS } from '../common/config';
+import { EXAMPLE_CATEGORIES, BLACK_MAP } from '../common/config';
 import { store } from '../common/store';
 import ExampleCard from './ExampleCard.vue';
 import LazyLoad from 'vanilla-lazyload/dist/lazyload.esm';
@@ -193,8 +193,7 @@
       const imgs = this.$el.querySelectorAll('img.chart-area');
       for (let i = 0; i < imgs.length; i++) {
         // Force lazyload to update
-        imgs[i].classList.remove(LAZY_LOADED_CLASS);
-        imgs[i].setAttribute('data-was-processed', 'false');
+        LazyLoad.resetStatus(imgs[i]);
       }
       this._lazyload.update();
     }
@@ -223,7 +222,17 @@
       // container: this.$el.querySelector('#explore-container .example-list-panel'),
       elements_selector: '.chart-area',
       load_delay: 400,
-      class_loaded: LAZY_LOADED_CLASS
+      class_loaded: LAZY_LOADED_CLASS,
+      callback_error(img) {
+        const fallbackSrc = img.getAttribute('data-src');
+        const children = img.parentElement.children;
+        for (let i = 0, len = children.length; i < len; i++) {
+          const el = children[i];
+          if (el !== img) {
+            el.srcset = fallbackSrc;
+          }
+        }
+      }
     });
   },