From 31444f2458cc2c07ae8e7b2f6ec799723965bd22 Mon Sep 17 00:00:00 2001 From: XPoet Date: Fri, 8 Jan 2021 11:55:45 +0800 Subject: [PATCH] perf: optimize lazyload image --- source/css/common/basic.styl | 5 +-- source/css/common/variables.styl | 3 -- source/images/loading.svg | 77 +++++++++++++++++++++++++------- source/js/lazyload.js | 2 +- 4 files changed, 63 insertions(+), 24 deletions(-) diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl index 162aae2..e82f980 100644 --- a/source/css/common/basic.styl +++ b/source/css/common/basic.styl @@ -87,11 +87,10 @@ a { // ====================================================================== img { &[lazyload] { - padding: 20px; + padding: 10px; + margin: 20px auto !important; cursor: not-allowed; pointer-events: none; - margin: 20px auto !important; - background: var(--lazyload-background-color); transition(); } } diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl index cb64317..b7cdb0f 100644 --- a/source/css/common/variables.styl +++ b/source/css/common/variables.styl @@ -77,7 +77,6 @@ $link-color = darken($default-text-color, 10%); $copyright-info-color = #CC0033; $avatar-background-color = #0066CC; $loading-progress-bar-color = linear-gradient(45deg, #ef0e18, #ff5f00, #eea40b, #1fe708, #00d6d6, #016bd7, #f300f3); -$lazyload-background-color = rgba(200, 200, 200, 0.5); // ======================================================================================== @@ -101,7 +100,6 @@ $dark-link-color = lighten($dark-default-text-color, 10%); $dark-copyright-info-color = darken($copyright-info-color, 20%); $dark-avatar-background-color = darken($avatar-background-color, 10%); $dark-loading-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee); -$dark-lazyload-background-color = rgba(50, 50, 50, 0.5); // ======================================================================== @@ -135,7 +133,6 @@ root-color(mode) { --copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color; --avatar-background-color: mode == 'light' ? $avatar-background-color : $dark-avatar-background-color; --loading-progress-bar-color : mode == 'light' ? $loading-progress-bar-color : $dark-loading-progress-bar-color; - --lazyload-background-color : mode == 'light' ? $lazyload-background-color : $dark-lazyload-background-color; } diff --git a/source/images/loading.svg b/source/images/loading.svg index 004a356..06bc6d5 100644 --- a/source/images/loading.svg +++ b/source/images/loading.svg @@ -1,17 +1,60 @@ - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/source/js/lazyload.js b/source/js/lazyload.js index c6967ee..f46400d 100644 --- a/source/js/lazyload.js +++ b/source/js/lazyload.js @@ -25,7 +25,7 @@ KEEP.initLazyLoad = () => { img.removeAttribute('loading'); clearTimeout(loadImageTimeout); } - }, 1000); + }, 500); } } });