veränderndes Bild src Inline-onload mit nimmt zu viel CPU-Auslastung

Question

Nur neugierig zu wissen, warum diese Zeile Code zu viel CPU nimmt

<img style="display:none;" src="media/logo.png" 
    onload="this.style.display='block';this.src='media/dynamic_logo.png'" /> 

(wie auf der Konsole Profiler gesehen) Wenn ich entweder entfernen onload Ereignis oder src Attribut Es braucht nicht so viel CPU. Ich konnte nicht verstehen, was dort vor sich geht. Kann jemand markieren

Answer 1

Ändern Sie Ihr Bild src Attribut lassen Sie den Browser die Bilddaten neu laden, kein Wunder, wenn die neue src ist das gleiche wie das Original.

In Ihrem Beispiel erzeugt dies eine Art Schleife.

Sehen Sie diese Geige den Prozess zu verstehen (in Ihrem Browser js Konsole aussehen):

https://jsfiddle.net/magikarp/d72ndk1e/

Wenn Sie das this.src [...] aus dem Attribut onload entfernen, Konsole nur eine Eingabeaufforderung „onload aufgerufen wird“.