Bude načítanie obrázka pre hodnotu viditeľnosti nastavené ako skryté pri načítaní stránky? - javascript, html, html5, css3

Som v JavaScripte nová.Chcel by som vedieť, ako funguje načítanie. Predpokladajme, že na svojej html stránke mám obrázok, ktorého viditeľnosť je nastavená ako skrytá. Mám tlačidlo, ktoré po kliknutí nastaví vlastnosť viditeľnosti obrázka na viditeľnú pomocou JavaScriptu. Po načítaní stránky sa obrázok načíta alebo sa načíta po kliknutí na tlačidlo.
Podobne by som chcel vedieť o vlastnosti display, ktorej hodnota je nastavená ako none.
Vopred ďakujem.

odpovede:

6 pre odpoveď č. 1

V obidvoch scenároch obrázky sa načíta (bez ohľadu na to, či vidíte alebo nevidíte požadovaný obrázok.)viditeľnosť alebo zobrazenie). Rozdiel medzi viditeľnosťou a zobrazením je v zásade v „priestore“, ktorý prvok bude na stránke zaberať. Vďaka viditeľnosti si prvok zachová tento priestor, aj keď je skrytý. Pri zobrazení prvok nezachová priestor, ostatné prvky ho budú môcť obsadiť.

Ak NECHCETE načítať obrázok a vyAk chcete spustiť načítanie až po stlačení tlačidla, je pekným trikom nastaviť atribút IMG src na „data:“ alebo „about: blank“ a potom ho zmeniť kliknutím na tlačidlo. Týmto spôsobom prehliadač „oklamete“ a nenačíta obrázok pri načítaní stránky.

Dúfam, že to pomôže

---

1 pre odpoveď č. 2

Po načítaní stránky sa obrázok načíta a bude skrytý. Po kliknutí na jeho tlačidlo sa jeho vlastnosť štýlu stane viditeľným.

Ak nastavíte štýl na display:none; bude skrytý;

---

0 pre odpoveď č. 3

Pokiaľ je značka img v DOM, načíta zdroj; CSS určí, či je alebo nie je skutočne zobrazené. Či už používate alebo nie visibility: hidden; alebo display:none; to neovplyvní.

Hlavný rozdiel je v tom, či obrázok bude alebo nebude zaberať akékoľvek miesto na stránke; prvok nastavený na display: none; nie je vykreslený vôbec, zatiaľ čo prvok nastavený na visibility: hidden; bude stále zaberať priestor stanovený jeho krabicovým modelom.

Môžete to vidieť v akcii tu: http://jsfiddle.net/d8NrK/

---

0 pre odpoveď č. 4

Lepšie je použiť vlastnosť display CSS na kontrolu viditeľnosti a priestoru, ktorý zaberá.

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

alebo použite jQuery na zjednodušenie kódu.

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

alebo použite $ ("# elementId"). toggle ();

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

---

0 pre odpoveď č. 5

Prehliadač načíta všetky obrázky, ktoré majú src atribút.tak použite data-src. Tu je to, čo môžete urobiť

<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 túto funkciu zavolajte, keď to potrebujete.

Odpoveď na môj kód je tu

---