Wird das Bild für den Sichtbarkeitswert beim Laden der Seite als ausgeblendet angezeigt? - Javascript, HTML, HTML5, CSS3

Ich bin neu in Javascript. Ich würde gerne wissen, wie das Laden funktioniert. Angenommen, auf meiner HTML-Seite befindet sich ein Bild, dessen Sichtbarkeit als ausgeblendet festgelegt ist. Ich habe eine Schaltfläche, die beim Klicken die Sichtbarkeit des Bildes mit Javascript sichtbar macht. Wenn die Seite geladen wird, wird das Bild geladen oder wird es geladen, wenn auf die Schaltfläche geklickt wird.
Ebenso würde ich gerne etwas über die Anzeigeeigenschaft wissen, deren Wert auf none gesetzt ist.
Danke im Voraus.

Antworten:

6 für die Antwort № 1

In beiden Szenarien die Bilder wird geladen (Unabhängig davon, ob Sie das Bild sehen können oder nichtzur Sichtbarkeit oder Anzeige). Der Unterschied zwischen Sichtbarkeit und Anzeige liegt im Wesentlichen in dem "Raum", den das Element auf der Seite einnimmt. Mit Sichtbarkeit behält das Element diesen Raum, auch wenn es ausgeblendet ist. Mit display behält das Element nicht den Platz, andere Elemente können diesen Platz belegen.

Wenn Sie NICHT möchten, dass das Bild geladen wird, und SieWenn Sie das Laden erst starten möchten, wenn die Schaltfläche gedrückt wird, können Sie das IMG-Attribut "src" auf "data:" oder "about: blank" setzen und es dann durch Klicken auf die Schaltfläche ändern. Auf diese Weise "betrügen" Sie den Browser und das Bild wird beim Laden der Seite nicht geladen.

Hoffe das hilft

---

1 für die Antwort № 2

Beim Laden der Seite wird das Bild geladen und ausgeblendet. Klicken Sie auf Ihre Schaltfläche, um die Stileigenschaft anzuzeigen.

Wenn Sie den Stil auf einstellen display:none; es wird versteckt sein;

---

0 für die Antwort № 3

Solange sich das img-Tag im DOM befindet, wird die Ressource geladen. Das CSS bestimmt, ob es tatsächlich angezeigt wird oder nicht. Ob Sie verwenden oder nicht visibility: hidden; oder display:none; wird dies nicht beeinflussen.

Der Hauptunterschied besteht darin, ob das Bild auf der Seite Platz einnimmt oder nicht. ein Element gesetzt auf display: none; wird überhaupt nicht gerendert, wohingegen ein Element auf gesetzt wird visibility: hidden; wird immer noch den von seinem Box-Modell festgelegten Platz einnehmen.

Sie können das hier in Aktion sehen: http://jsfiddle.net/d8NrK/

---

0 für die Antwort № 4

Das Bessere ist, die Anzeigeeigenschaft des CSS zu verwenden, um die Sichtbarkeit und den Platz zu steuern, den es einnimmt.

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

Oder verwenden Sie jquery, um den Code zu vereinfachen.

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

oder benutze $ ("# elementId"). toggle ();

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

---

0 für die Antwort № 5

Der Browser lädt alle Bilder, die hat src attribute.so verwenden data-src. Hier ist was Sie tun können

<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);

Rufen Sie diese Funktion nun bei Bedarf auf.

Die Aktualisierung meines Codes ist Hier

---