#Preload

在 Web 应用程序中预加载图像的 5 种方法

HTML JavaScript Preload

了解如何通过提前加载图像来优化您的 Web 应用程序用户体验 (UX)。

12 月 17 日，2022 前端约 5 分钟阅读

Lynan

Live Young n Act Now.

64 文章 / 5 分类 / 32 标签 / 2 系列

.hdr-info-wrap { display: none; } #back-to-top { transform: translateY(0); pointer-events: all; opacity: 1; } .lazyload-wrap { display: none; } .post-cover-img-wrap .cover-img { opacity: 1 !important; } #gitalk-container { display: none; } .hdr-switch { display: none; } #toc-toggle { display: none; } .button.rss { margin-right: 0 !important; } .copy-btn { display: none; } #page-donates { display: none; } #post-age-warning { display: none; } #toc .toc-item-wrap:not(.active) { opacity: unset; transition: unset; } #toc:hover .toc-item-wrap:not(.active) { opacity: unset; } #toc .toc-item-wrap.active .toc-item-link { font-weight: normal; color: #333; } #toc .toc-item-wrap.active .toc-item-link::before { display: none; } #toc .toc-item-wrap.active .toc-item-link:not(.active) { opacity: unset; } #toc .toc-item-wrap.active .toc-sub-item-link:not(.active) { opacity: unset; } #post .post-meta #content-switch { display: none; } #post figure.highlight.folded, #raw-markdown-block figure.highlight.folded { max-height: unset; overflow-y: auto; } #post figure.highlight.folded .fold-toggle, #raw-markdown-block figure.highlight.folded .fold-toggle { display: none; } .image-grid.scroll, .image-grid.slider, .image-grid.switcher { display: flex !important; gap: var(--image-grid-gap) !important; overflow-x: auto !important; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; } .image-grid.scroll .grid-item, .image-grid.slider .grid-item, .image-grid.switcher .grid-item { display: block !important; flex: 0 0 min(86%, 760px) !important; width: min(86%, 760px) !important; margin-right: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; scroll-snap-align: center !important; transition: none !important; } .image-grid.scroll .grid-item .lazyload-wrap, .image-grid.slider .grid-item .lazyload-wrap, .image-grid.switcher .grid-item .lazyload-wrap { display: none !important; } .image-grid.scroll .grid-item .caption, .image-grid.slider .grid-item .caption, .image-grid.switcher .grid-item .caption, .image-grid.scroll .grid-item .pswp-caption-content, .image-grid.slider .grid-item .pswp-caption-content, .image-grid.switcher .grid-item .pswp-caption-content { display: block !important; } .image-grid.scroll .grid-item .lazyload-outer-wrap noscript, .image-grid.slider .grid-item .lazyload-outer-wrap noscript, .image-grid.switcher .grid-item .lazyload-outer-wrap noscript { display: block; } .image-grid.scroll .grid-item .lazyload-outer-wrap noscript img, .image-grid.slider .grid-item .lazyload-outer-wrap noscript img, .image-grid.switcher .grid-item .lazyload-outer-wrap noscript img { display: block; width: 100%; height: auto !important; margin: 0 auto !important; } .image-grid.switcher .image-grid-switcher-controls { display: none !important; }