You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/09/22 08:18:28 UTC
[echarts-examples] branch gh-pages updated: optimize webp on safari
14
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch gh-pages
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
The following commit(s) were added to refs/heads/gh-pages by this push:
new b098c4f optimize webp on safari 14
b098c4f is described below
commit b098c4f60c0995b0c41f8955fa7a28ae64c2d815
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Sep 22 16:17:48 2021 +0800
optimize webp on safari 14
---
src/common/config.js | 11 -----------
src/explore/ExampleCard.vue | 28 ++++++++++++++++++++++------
src/explore/Explore.vue | 2 +-
3 files changed, 23 insertions(+), 18 deletions(-)
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 @@ const URL_PARAMS = {};
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 @@ export default {
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 @@ export default {
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
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org