Erster Versuch des verzögerten Ladens (Verzögern des Ladens eingebetteter YouTube-Videos) – wie kann ich das eleganter m ⇐ Jquery

[Anonymous]

Gestern habe ich beschlossen, die Art und Weise, wie meine Website YouTube-Videos lädt, zu verbessern, indem ich sie nur dann einbette, wenn ein Benutzer sie anfordert. Manchmal befinden sich auf einer Seite bis zu 30 Videos, und das Laden würde sehr lange dauern.

Dies ist das erste Mal, dass ich eine „Lazy Loading“-Methode für irgendetwas ausprobiert habe, und ich dachte, es wäre durchaus eine Frage wert:

Was kann ich tun, um das zu verbessern?

Wie kann ich es ein bisschen mehr machen? anmutig?

Verfehlt das völlig den Sinn des verzögerten Ladens?

JSFiddle.

Ignorieren Sie den Stil, da er hier irrelevant ist.



Das funktioniert, indem Sie zunächst einen Anker auf der Seite platzieren, die die ID des Videos enthält:

Code: Select all

Die dahinterliegende jQuery durchläuft dann jedes a.youtube-Video und erstellt einen transparenten Bereich mit der Miniaturansicht des Videos als Hintergrund:

Code: Select all

$('a.youtube-video').each(function() {
var videoId = $(this).attr('data-video');
var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg";

var videoBackground = $('');

videoBackground.css({
background:"#fff url('"+videoThumbnail+"') no-repeat"
})
...

Dann wird der Stil des Anker-Tags geändert (dies geschieht hier, um zu verhindern, dass Browser mit deaktiviertem JavaScript beeinträchtigt werden):

Code: Select all

    $(this).css({
height:315,
width:460,
position:"relative",
display:"block",
textAlign:"center",
color:"#fff",
fontSize:26
});

Dann wird die Schleife beendet, indem die Spanne zum Anker hinzugefügt wird:

Code: Select all

    $(this).text('Click to load video');
$(this).append(videoBackground);
});

Das Laden des eingebetteten YouTube-Videoobjekts erfolgt beim Ankerklick:

Code: Select all

$('a.youtube-video').click(function(e) {
e.preventDefault();
var videoId = $(this).attr('data-video');
var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg";
var videoEmbed = $(' ... ');
...

Abschließend wird der Einbettungscode zum übergeordneten Element des Ankers hinzugefügt und der Anker entfernt:

Code: Select all

    $(this).parent().append(videoEmbed);
$(this).hide();
});