Hallo in die Runde!
In einem Projekt werden viele DIV Container erzeugt, die je ein kleines Bild als Hintergrundbild haben. Die Container werden anhand einer Datenbankabfrage erstellt. Wenn nun 500 Container auf einmal ein Hintergrundbild laden, geht das in die Hose.
Also war meine Idee: Immer nur die Bilder zu laden die grade angezeigt werden. Da ich mit "mCustomScrollbar" arbeite, habe ich einfach das Event "whileScrolling" verwendet, was meine Funktion (siehe unten) ausführt.
Ich gebe also z.B. 100x diese Zeile aus (ID passt sich an):
Die JavaScript Funktion, die beim Scrollen ausgeführt wird, schaut so aus:
Soweit so gut. Klappt wunderbar. Jedoch ist die CPU Last irgendwas bei 30% (Intel Core i7). Kann also nicht der optimale Code sein. Zumal nicht nur 100 Bilder sondern gerne auch mal 1000 Bilder angezeigt werden.
Wie könnte ich das Konstrukt optimieren?
Vielen Dank fürs Nachdenken und schöne Grüße!
Christian
In einem Projekt werden viele DIV Container erzeugt, die je ein kleines Bild als Hintergrundbild haben. Die Container werden anhand einer Datenbankabfrage erstellt. Wenn nun 500 Container auf einmal ein Hintergrundbild laden, geht das in die Hose.
Also war meine Idee: Immer nur die Bilder zu laden die grade angezeigt werden. Da ich mit "mCustomScrollbar" arbeite, habe ich einfach das Event "whileScrolling" verwendet, was meine Funktion (siehe unten) ausführt.
Ich gebe also z.B. 100x diese Zeile aus (ID passt sich an):
PHP:
<div class="ThumbContainer ThumbNotLoaded" id="$Picture["ID"]"></div>
Die JavaScript Funktion, die beim Scrollen ausgeführt wird, schaut so aus:
Code:
function ShowThumbs(scrollerTop) {
var scrollerHeight = $("#ImageSurveyArea").height(); // Liest die Höhe des Bereiches aus, in dem die Bilder angezeigt werden
$(".ThumbNotLoaded").each(function () { // Läuft jedes Bild durch was noch nicht geladen wurde
// Wenn das Bild sich im sichtbaren Bereich befindet
if ($(this).position().top >= scrollerTop && $(this).position().top <= (scrollerHeight+scrollerTop)) {
$(this).html('<div class="ThumbImage" style="background-image: url(\'functions/PictureManager/Thumbnail.php?ID='+$(this).attr('id')+'\')"></div>'); // Neuen DIV Container erzeugen, der das Bild als Hintergrundbild hat
$(this).removeClass("ThumbNotLoaded"); // Klasse entfernen um zu signalisieren das Bild geladen wurde
}
});
}
Soweit so gut. Klappt wunderbar. Jedoch ist die CPU Last irgendwas bei 30% (Intel Core i7). Kann also nicht der optimale Code sein. Zumal nicht nur 100 Bilder sondern gerne auch mal 1000 Bilder angezeigt werden.
Wie könnte ich das Konstrukt optimieren?
Vielen Dank fürs Nachdenken und schöne Grüße!
Christian