Загрузка изображения при загрузке страницы

Question

У меня есть htmls на странице, которая отображает фотоальбом.

Как видите, есть 3 <img> тега.

Первые два находятся под <li>, который имеет отображение: нет. Но последнее изображение видно, так как оно имеет стиль = ''.

Мой вопрос: во время загрузки страницы будут загружены первые 2 изображения с последним изображением, даже если в их контейнере отображается: нет?

<div class="gallery">
                    <ul id="PhotoContainer">
                            <li style="display: none;" name="DSC01100.JPG" id="4ee01301602fdd0efc35683e">
                                <img src="http://site/Files/Get?fileId=4ee01306602fdd0efc356844"></li>
                            <li style="display: none;" name="DSC01102.JPG" id="4ee01308602fdd0efc35685f">
                                <img src="http://site/Files/Get?fileId=4ee0130a602fdd0efc356864"></li>                            
                            <li style="" name="DSC01101.JPG" id="4ee01306602fdd0efc35684f">
                                <img alt="my description for this image" src="http://site/Files/Get?fileId=4ee01308602fdd0efc356855"></li>
                    </ul>
                </div>

Answer 1

Все изображения будут загружены в кеш и технически веб-страницу.Тем не менее, CSS скрывает 2 изображения, прежде чем они вступают в контакт с человеческим глазом.

Answer 2

Если под "загружен" вы имеете в виду загруженный, то да. Ресурсы со стилем display: none по-прежнему извлекаются, но не обрабатываются. На самом деле, это допустимая техника предварительной загрузки изображения, как описано в этой статье .

Для проверки вы можете загрузить свою страницу и просмотреть вкладку загруженных ресурсов в Chrome Developer Tools или Firebug.

Answer 3

Это зависит от того, какой браузер загружает веб-страницу, я знаю, что Google Chrome загружает все изображения, я ожидаю, что большинство других браузеров делают то же самое ...