JavaScript Overlay, das Bilder hinter ihm bewirkt.

Question

HINTERGRUND: Ich habe eine Seite von Bildern, die reagieren, so dass sie auf Mobile zeigen sie in einer Spalte. Gut, wenn ein Benutzer zum ersten Mal meine Seite besucht, habe ich ein JavaScript-Popup, das fragt, ob sie auf einer Mailing-Liste sein wollen.

MEIN PROBLEM: In mobilen, wenn das Pop-up überlagert die Bilder sie alle auf eine Breite von 960px strecken; aber vor dem Pop-up laden alle Bilder normale Größe für das Handy. Die Bilder werden für eine Sekunde normal geladen, bis das Popup geladen wird. Wenn das Pop-up geschlossen wird, werden die Bilder nicht mehr verkleinert, bis Sie die Ausrichtung des Browsers ändern oder die Größe des Browsers ändern (falls dies auf dem Desktop angezeigt wird).

Frage: Wie kann ich testen, was mit den Bildern passiert, die gestreckt werden? Kann ich einen Listener in JS hinzufügen, um die Konsole jedes Mal zu aktualisieren, wenn sich ihre Breite ändert? Kann ich etwas sagen, wer oder was aktualisiert ihre Breiten?

Answer 1

Lange Geschichte sehr kurz das Problem, das ich erlebte, war, weil das pop-up-modal eine Klasse das HTML-Tag der Seite hinzufügte. Diese Klasse "no-scroll" hat die Position gesetzt: Fixed zum HTML-Tag. Aus irgendeinem Grund, wenn dies passierte und das Modal auf der Bühne erschien, würden sich alle sichtbaren Bilder im Hintergrund so dehnen, als wären sie auf dem Desktop und nicht auf dem Handy zu sehen. Sobald dieses Attribut aus der No-Scroll-Klasse entfernt wurde

Dies war eine sehr zufällige und schlecht gestellte Fragen, die mehr hätte recherchiert werden müssen, bevor sie gefragt werden.