Блог

Я уже писал об этой проблеме, с которой сталкивался раньше, но с тех пор мой код изменился. Когда я загружаю страницу «проекты» на своем веб-сайте, предполагается, что на ней должна быть галерея «карточек» с изображениями, которая загружается в сетку, как на рисунке ниже: веб-сайт с изображениями, замененными стоковыми изображениями, когда я загружаю веб-сайт после очистки кэша, вот как это выглядит:Веб-сайт с испорченными карточками Моим первым шагом в улучшении этого было снижение разрешения всех изображений, так что теперь они имеют разрешение 320 пикселей. Это помогло немного, но не слишком. Затем я нашел сообщение о предварительной загрузке изображений, так что теперь я делаю это, когда загружается домашняя страница моего сайта, но это не помогает, когда кто-то сначала переходит на страницу проектов. Этот код предварительной загрузки приведен ниже:

 <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, поэтому, пожалуйста, объясните все четко.
Заранее спасибо,
Клейтон

мой ответ может немного помочь ускорить загрузку изображений на сайт, хотя это не обязательно может полностью решить вашу проблему. Вы пробовали сжимать изображения, используя что-то вроде tinypng.com ? В основном это уменьшает размер файла ваших изображений без потери качества (по большей части).