optimize webp on safari 14
diff --git a/src/common/config.js b/src/common/config.js
index f5e851e..e993e2b 100644
--- a/src/common/config.js
+++ b/src/common/config.js
@@ -108,17 +108,6 @@
export { URL_PARAMS };
-export const SUPPORT_WEBP = (function () {
- var elem = document.createElement('canvas');
- elem.width = elem.height = 1;
- if (!!(elem.getContext && elem.getContext('2d'))) {
- // was able or not to get WebP representation
- return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
- }
- // very old browser like IE 8, canvas not supported
- return false;
-})();
-
export const SCRIPT_URLS = {
echartsMinJS:
'https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/echarts.min.js',
diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue
index 3ac1630..97552ee 100644
--- a/src/explore/ExampleCard.vue
+++ b/src/explore/ExampleCard.vue
@@ -1,11 +1,20 @@
<template>
<div class="example-list-item">
<a target="_blank" class="example-link" :href="exampleLink">
- <img
+ <picture class="chart-area">
+ <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"
+ />
+ </picture>
+ <!-- <img
class="chart-area"
src="../asset/placeholder.jpg"
:data-src="screenshotURL"
- />
+ /> -->
</a>
<div>
<div class="example-langs">
@@ -28,7 +37,7 @@
<script>
import { store } from '../common/store';
-import { SUPPORT_WEBP, URL_PARAMS } from '../common/config';
+import { URL_PARAMS } from '../common/config';
export default {
props: ['example'],
@@ -74,12 +83,19 @@
return './editor.html?' + hash.join('&');
},
- screenshotURL() {
+ screenshotURLWithoutExt() {
const example = this.example;
const themePostfix = this.exampleTheme ? '-' + this.exampleTheme : '';
- const ext = SUPPORT_WEBP ? 'webp' : 'png';
const folder = example.isGL ? 'data-gl' : 'data';
- return `${store.cdnRoot}/${folder}/thumb${themePostfix}/${example.id}.${ext}?_v_=${store.version}`;
+ return `${store.cdnRoot}/${folder}/thumb${themePostfix}/${example.id}`;
+ },
+
+ screenshotURLWebP() {
+ return this.screenshotURLWithoutExt + `.webp?_v_=${store.version}`;
+ },
+
+ screenshotURLPNG() {
+ return this.screenshotURLWithoutExt + `.png?_v_=${store.version}`;
}
}
};
diff --git a/src/explore/Explore.vue b/src/explore/Explore.vue
index 945c60d..f6854f9 100644
--- a/src/explore/Explore.vue
+++ b/src/explore/Explore.vue
@@ -221,7 +221,7 @@
this._lazyload = new LazyLoad({
// Container should be the scroll viewport.
// container: this.$el.querySelector('#explore-container .example-list-panel'),
- elements_selector: 'img.chart-area',
+ elements_selector: '.chart-area',
load_delay: 400,
class_loaded: LAZY_LOADED_CLASS
});