HTML Objekt sichtbar oder nicht

[jemand anders]

Hallo,

ich habe etwas Performanceprobleme auf der Webseite durch zu viele Videos, und es kommen sogar immer noch mehr hinzu.

Um die Sache in den Griff zu kriegen, habe ich mir überlegt, den Video-iframe als Kommentar zu definieren, und erst wenn das umgebende Element auf den Bildschirm erstmalig zu sehen ist, soll aus dem Kommentar der Video-iframe werden.

<div><!-- <iframe src=""></iframe>--></div>

Hier ist beschrieben, wie die Umwandlung geht.

Das Problem ist nun: wie bekommt das System mit, dass das umgebende Element (erstmalig) angezeigt wird, visible ist oder wie immer das heißen mag? Was für ein Event ist das?

Grüße

 

[Sempervivum]

Das ist das onscroll-Event. Zusätzlich musst du prüfen, ob sich das Element im Viewport befindet: Mit scrollTop() und scrollLeft() kannst Du die linke und die obere Kante des Anzeigebereiches ermitteln und wenn Du darauf die Abmessungen des Viewports ($( window ).height() und $( window ).width()) addierst, die rechte und die untere Kante. Dann kannst Du prüfen, ob sich das Element im Anzeigebereich befindet und entspr. aktivieren. Zusätzlich würde ich in einem data-Attribut vermerken, dass das Element schon eingeblendet wurde, damit Du dann die ganze Bearbeitung nicht immer wieder machen musst.
Wenn Du so viele Videos auf einer Seite hast, solltest Du aber deine Struktur überprüfen, ob man sie nicht auf mehrere Seiten verteilen kann. Oder eine oder mehrere Playlist(s) einführen.

 

[jemand anders]

Dann kannst Du prüfen, ob sich das Element im Anzeigebereich befindet und entspr. aktivieren

Wie mache ich das? Das ist mir nciht klar.

 

[Sempervivum]

var vpleft = $(window).scrollLeft();
var vptop = $(window).scrollTop();
var vpright = vpleft + $(window).width();
var vpbottom = vptop + $(window).height();

function isVisible(ob) {
    var offset = ob.offset();
    var obleft = offset.left;
    var obtop = offset.top;
    var obright = obleft + ob.width();
    var obbottom = obtop + ob.height();
    return (obleft > vpleft && obright < vpright && obtop > vptop && obbottom < vpbottom);
}
$(".div-mit-video").each(function() {
    if (isVisible($(this) && $(this).attr("data-active") != "true") {
        $(this).attr("data-active", "true");
        // den iFrame in diesem div aktivieren
    }
});

Das ganze dann im Handler für onscroll. Ungetestet, ich hab's einfach so hingeschrieben.