网站图片库加载缓慢且重叠答案

【问题标题】：Website gallery of pictures loading slowly and overlapping网站图片库加载缓慢且重叠
【发布时间】：2021-01-20 19:26:06
【问题描述】：

我之前曾发布过有关此问题的信息，但此后我的代码发生了变化。当我加载我网站的“项目”页面时，应该有一个“卡片”图库，其中包含加载到网格中的图片，如下图所示： Website with the pictures replaced with stock images 当我在清除缓存后加载网站时，它是这样的： Website with screwed up cards 我改进的第一步是降低所有图像的分辨率，所以现在它们是 320p。这有点帮助，但不是太多。然后我发现了一篇关于预加载图像的帖子，所以现在我在我的网站主页加载时这样做，但是当有人首先进入项目页面时这并没有帮助。该预加载代码如下：

<div class="hidden">
        <script type="text/javascript">
                var images = new Array()
                function preload() {
                    for (i = 0; i < preload.arguments.length; i++) {
                        images[i] = new Image()
                        images[i].src = preload.arguments[i]
                    }
                }
                preload(
                    "../assets/CNC Front Full Render 320p.png",
                    "../assets/DIODE Board Full Render 320p.png",
                    "../assets/Dock Trailer Full Render 320p.png",
                    "../assets/Fold3r Full Render 320p.png",
                    "../assets/Car Full Views 320p.png",
                    "../assets/Stator Full Render 320p.png",
                    "../assets/Ventilator Full Render 320p.png",
                    "../assets/F4 Robot Full Render 320p.png",
                    "../assets/2020 FRC Robot Render 320p.png",
                    "../assets/2019 FRC Robot Render 320p.png",
                    "../assets/2018 FRC Robot Render 320p.png",
                    "../assets/2017 FRC Robot Render 320p.png",
                    "../assets/Autonoprint Render 320p",
                    "../assets/Website.png"
                )
        </script>
    </div>

我做的另一件事是在每个项目图片html的样式中指定每张图片的大小，代码如下：

<img src="../assets/Picture 320p.png" width=100% height=66.6%>

我不知道从哪里开始，感谢任何帮助。我对JS知之甚少，所以请解释清楚。提前致谢，克莱顿

【问题讨论】：

标签： javascript html css file-upload

【解决方案1】：

我的回答可能对在网站上更快地加载图像有所帮助，尽管它不一定能完全解决您的问题。您是否尝试过使用 tinypng.com 之类的工具压缩图像？基本上，它可以在不损失质量的情况下减小图像的文件大小（大部分情况下）。

【讨论】：