Различное поведение со скрытыми элементами html в разных браузерах

У меня есть div с display:none как style значение атрибута. В css для этого div установлен URL-адрес исходного изображения. Я просто не хочу, чтобы запрос на изображение был запущен до тех пор, пока div не будет виден через некоторый код JS. В Firefox, вкладка сети показывает, что запрос не выдается, как ожидается. Но в Chrome инструментов для разработчиков Я обнаружил, что запрос на изображение действительно запускается после события DOMContentLoaded. Какая может быть причина разного поведения со скрытыми элементами в этих двух разных браузерах?Различное поведение со скрытыми элементами html в разных браузерах

Markup:

<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     .remoteAudioSoundButton{ 
      background: url("http://ourserverurl/images/image_lady.png"); 
      width: 200px; 
      height: 200px; 
      border: 2px black; 
     } 
    </style> 
</head> 
<body > 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class='remoteAudioSoundButton' style="display:none"></div> 
<script type="text/javascript"> 
    window.onload = function(){ 
     console.log("inside onload"); 
    }; 
</script> 
</body> 
</html>

Скриншоты:

Chrome:

enter image description here

Firefox:

enter image description here

источник

2015-02-24 Md. Arafat Al Mahmud

Связанный: http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading – jdphenix

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

$(function(){ 
 
    $('button').click(function() { 
 
    $('.remoteAudioSoundButton').toggleClass('visible'); 
 
    }); 
 
});

.remoteAudioSoundButton{ 
 
    display: none; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px black; 
 
} 
 
.visible { 
 
    background: url("http://ourserverurl/images/image_lady.png"); 
 
    display: block; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class='remoteAudioSoundButton'></div> 
 
<button>Toggle Class</button>

источник

2015-02-24 07:15:33 jrarama

Ницца. Я сделаю вот так. –

Загруженное изображение не отображается в IE8 –

Браузеры могут загружать изображения, которые связаны с элементами, которые имеют display:none; набор.

Я работал вокруг этого раньше, используя технику, как этот фрагмент кода:

document.getElementById('showKitty').addEventListener('click', function() { 
 
    var kitty = document.getElementById('kitty'); 
 
    kitty.src = "https://placekitten.com/g/200/300"; 
 
    kitty.classList.toggle('hidden'); 
 
});

.hidden { 
 
    display:none; 
 
}

<h1>What Can JavaScript Do?</h1> 
 
<img id="kitty" class="hidden"> 
 
<button id="showKitty">Show kitten</button>

источник

2015-02-24 07:17:34 jdphenix

Итак, вам нужно вручную установить src из JavaScript позже. Но что, если значение атрибута src известно только для html/css-дизайнера? И у парня, манипулирующего страницей на JavaScript, есть только задача показать или скрыть элемент. –

По общему признанию, я оба ребята. – jdphenix

К сожалению, я не знаю. –

Вот документация различного поведения браузера:

http://justinmarsan.com/hidden-elements-and-http-requests/

Который говорит :

Chrome и Safari (WebKit)

WebKit загружают файл каждый раз, кроме случаев, когда фон применяется через несоответствующую медиа-запрос. Firefox

Firefox не будет загружать изображение с фоновым изображением, если стили скрыты, но они все равно будут загружать активы из тегов img. Opera

Как и в Firefox, Opera не будет загружать ненужные фоновые изображения. Internet Explorer

IE, как и WebKit, загружает фоновые изображения, даже если у них есть дисплей: нет;

Так, чтобы ответить на вопрос о почему:

Быстрый аргумент для обеих сторон:

Firefox - Не загрузится, пока содержание видна: Нет причин загрузить что-то не просматриваемое, улучшить время загрузки страницы.

Webkit - Загрузите изображение на PageLoad: Таким образом, возможно, JavaScript решает сделать элемент видимым позже, переход может быть изменчивым, если изображение не поджат, а также любое другое число аргументов для предварительной загрузки изображений.

И краткое обсуждение темы:

http://robertnyman.com/2010/03/11/do-hidden-elements-load-background-images/

источник

2015-02-24 07:19:48 chiliNUT

Итак, не существует обходного пути этой конкретной проблемы в чистом HTML/CSS? –

№. но почему это имеет значение? если вы уже используете JS, метод установки стиля фонового изображения с другим классом. как было предложено другим ответом, звучит как лучший вариант – chiliNUT

Да, я согласен. И это то, что предложил Рарама. –

Различное поведение со скрытыми элементами html в разных браузерах

ответ

Смежные вопросы