Как я могу кэшировать URL-адрес изображения в стиле?

Question

Я пытаюсь создать HTML-страницу с несколькими изображениями. он отлично работает с localhost, но если я получаю доступ через Интернет, изображения загружаются очень медленно. Как я могу кэшировать URL-адрес изображения в стиле? Проверьте приведенный ниже код HTML.

<div style="display: block;" class="collection slide-item" id="div1"> 
    <div class="row collection type1"> 
     <div class="title"> 
      TRAVEL DESTINATION<div class="link"> 
       <a class="seecollection" href="searchdb.aspx?Keyword=travel destination">See Gallery</a></div> 
     </div> 
     <div class="span12"> 
      <a href="Search_Details.aspx?Id=1848760&amp;key=0"> 
       <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1848760.jpg)"> 
       </div> 
      </a> 
     </div> 
     <div class="span12"> 
      <div class="row"> 
       <div class="span4"> 
        <a href="Search_Details.aspx?Id=1716438&amp;key=0"> 
         <div class="square thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1716438.jpg)"> 
         </div> 
        </a> 
       </div> 
       <div class="span4"> 
        <a href="Search_Details.aspx?Id=1838282&amp;key=0"> 
         <div class="square thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1838282.jpg)"> 
         </div> 
        </a> 
       </div> 
       <div class="span4"> 
        <a href="Search_Details.aspx?Id=1845302&amp;key=0"> 
         <div class="square thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1845302.jpg)"> 
         </div> 
        </a> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="span6"> 
        <a href="Search_Details.aspx?Id=1717213&amp;key=0"> 
         <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1717213.jpg)"> 
         </div> 
        </a> 
       </div> 
       <div class="span6"> 
        <a href="Search_Details.aspx?Id=1842423&amp;key=0"> 
         <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1842423.jpg)"> 
         </div> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div style="display: none;" class="collection slide-item" id="div2"> 
    <div class="collection slide-item"> 
     <div class="row collection type4"> 
      <div class="title"> 
       HOLI<div class="link"> 
        <a class="seecollection" href="searchdb.aspx?Keyword=holi">See Gallery</a></div> 
      </div> 
      <div class="span6"> 
       <a href="Search_Details.aspx?Id=1918857&amp;key=0"> 
        <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1918857.jpg)"> 
        </div> 
       </a><a href="Search_Details.aspx?Id=1869141&amp;key=0"> 
        <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1869141.jpg)"> 
        </div> 
       </a> 
      </div> 
      <div class="span12"> 
       <a href="Search_Details.aspx?Id=1888875&amp;key=0"> 
        <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1888875.jpg)"> 
        </div> 
       </a> 
      </div> 
      <div class="span6"> 
       <a href="Search_Details.aspx?Id=1888899&amp;key=0"> 
        <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1888899.jpg)"> 
        </div> 
       </a><a href="Search_Details.aspx?Id=1918847&amp;key=0"> 
        <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1918847.jpg)"> 
        </div> 
       </a> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Вы не должны заботиться о кэшировании, браузер делать все это для вас, и это полностью зависит от браузера, потому что некоторые пользователи могут отключить кэширование или очистить кэш периодически.

Answer 2

Изображения, которые вы используете, довольно большие. Рассмотрите возможность использования меньших изображений, чтобы ускорить процесс загрузки (в зависимости от вашего дизайна, конечно, но я сомневаюсь, что вам нужна ширина 3 * 900 пикселей).

Answer 3

Возможно, вы захотите переместить ваш css во внешнюю таблицу стилей. Большинство современных браузеров затем кэшируют это для дальнейшего использования. Поскольку он сидит сейчас, вы можете получить непоследовательные результаты кэширования в зависимости от того, какой браузер вы используете, и как он анализирует все ваши встроенные css.

Answer 4

Как проблема с производительностью существует несколько способов ее решения.

Сначала ознакомьтесь с изображениями и размером и форматом изображений в частности. Целью является использование наиболее подходящего формата и уменьшение размера изображения.

Являются ли эти изображения фотографиями или графикой?

Если у вас есть фото, попробуйте сыграть с уровнем сжатия jpeg и найдите компромисс между качеством и размером.

Если это графика, попробуйте преобразовать в формат png.

Вы проверяете, есть ли у изображений метаданные внутри (например, информация о фотоаппарате, координаты места там, где было снято изображение и т. Д.), Поскольку вы можете использовать онлайн-или автономную утилиту для удаления метаинформации и в результате уменьшить размер и, возможно, удалить некоторые личные Информация.

В зависимости от формата, назначения и того, как часто изображения будут изменены, вы можете объединить их в спрайт (одно изображение, содержащее все изображения). Вы можете использовать css для извлечения необходимого изображения из спрайта. В этом случае вы сохраняете количество вызовов на сервер, что является одной из целей, чем оптимизация производительности сайта. У старых браузеров есть ограничение на количество параллельных вызовов, которые они могут выполнять на сервере (2 - 4 в зависимости от браузера), потому что многие вызовы будут заблокированы до тех пор, пока выполнение предыдущего не будет завершено.

Если ваши изображения достаточно малы, вы можете использовать протокол URI данных для встраивания изображений в html или css.

Вы также можете использовать javascript для предварительной загрузки изображений, прежде чем они понадобятся, поэтому браузер загрузит их в фоновом режиме, а затем придет время показать, что они будут загружены из кеша в кратчайшие сроки.