Czy ładowanie obrazu dla wartości widoczności zostanie ustawione jako ukryte podczas ładowania strony? - javascript, html, html5, css3

Jestem nowy w javascript.Chciałbym wiedzieć, jak przebiega ładowanie. Załóżmy, że na mojej stronie HTML mam obraz, którego widoczność jest ustawiona jako ukryta. Mam przycisk, który po kliknięciu ustawia właściwość widoczności obrazu na visbile przy użyciu JavaScript. Po załadowaniu strony obraz zostanie załadowany, czy też po kliknięciu przycisku.
Podobnie chciałbym wiedzieć o właściwości display, której wartość jest ustawiona na none.
Z góry dziękuję.

Odpowiedzi:

6 dla odpowiedzi № 1

W obu przypadkach obrazy zostanie załadowany (niezależnie od tego, czy widzisz obraz, czy niedo widoczności lub wyświetlania). Różnica między widocznością a wyświetlaniem polega w zasadzie na „przestrzeni”, jaką element będzie zajmował na stronie. Dzięki widoczności element zachowa tę przestrzeń, nawet jeśli jest ukryta. Dzięki wyświetlaczowi element nie zachowa miejsca, inne elementy będą mogły tę przestrzeń zająć.

Jeśli NIE chcesz, aby obraz został załadowany, a tychcesz rozpocząć ładowanie tylko wtedy, gdy przycisk jest wciśnięty, to fajną sztuczką jest ustawienie atrybutu src IMG na "data:" lub "about: blank", a następnie zmiana go za pomocą przycisku. W ten sposób „oszukasz” przeglądarkę i nie załaduje ona obrazu podczas ładowania strony.

Mam nadzieję że to pomoże

---

1 dla odpowiedzi nr 2

Po załadowaniu strony obraz zostanie załadowany i będzie ukryty. Na swoim przycisku kliknij, aby jego właściwość stylu stała się widoczna.

Jeśli ustawisz styl na display:none; będzie ukryty;

---

0 dla odpowiedzi № 3

Tak długo, jak tag img znajduje się w DOM, ładuje zasób; CSS określi, czy rzeczywiście jest wyświetlany. Niezależnie od tego, czy używasz visibility: hidden; lub display:none; nie wpłynie na to.

Główna różnica polega na tym, czy obraz zajmie jakąkolwiek przestrzeń na stronie; element ustawiony na display: none; nie jest w ogóle renderowany, podczas gdy element jest ustawiony na visibility: hidden; nadal będzie zajmować przestrzeń wyznaczoną przez jego model pudełkowy.

Możesz to zobaczyć w akcji tutaj: http://jsfiddle.net/d8NrK/

---

0 dla odpowiedzi nr 4

Lepiej jest użyć właściwości display CSS do kontrolowania widoczności i zajmowanego miejsca.

document.getElementById( "elemtId" ).style.display = "none";

lub użyj jquery, aby uprościć kod.

 $("#elementId").hide();
$("#elementId").show();

lub użyj $ ("# elementId"). toggle ();

Ref: - http://www.w3schools.com/jquery/jquery_hide_show.asp

---

0 dla odpowiedzi № 5

Przeglądarka ładuje wszystkie obrazy, które ma src atrybut. więc użyj data-src. Oto, co możesz zrobić

<img class="hidden" data-src="/images/url/to/image.jpg" />
(function($){
$.fn.reveal = function(){
var args = Array.prototype.slice.call(arguments);
return this.each(function(){
var img = $(this),
src = img.data("src");
src && img.attr("src", src).load(function(){
img[args[0]||"show"].apply(img, args.splice(1));
});
});
}
})(jQuery);

Teraz wywołaj tę funkcję, kiedy jej potrzebujesz.

Odniesienie do mojego kodu to tutaj

---