Первая попытка отложенной загрузки (отсрочка загрузки встроенных видео YouTube) – как мне сделать это более изящно? ⇐ Jquery

[Anonymous]

Вчера я решил улучшить способ загрузки видео с YouTube на моем веб-сайте, встраивая их только по запросу пользователя. Иногда на странице может быть до 30 видео, и это может занять много времени для загрузки.

Я впервые попробовал метод «ленивой загрузки» чего-либо и решил, что стоит спросить:

Что я могу сделать, чтобы улучшить это?

Как я могу сделать это немного лучше? изящно?

Это совершенно не учитывает суть отложенной загрузки?

JSFiddle.

Игнорируйте стиль, поскольку он здесь не имеет значения.



Это работает, сначала помещая привязку на страницу, содержащую видео. Идентификатор:




Затем jQuery проходит через каждое видео .youtube и создает прозрачный диапазон с миниатюрой видео в качестве фона:

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

var videoBackground = $('');

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


Затем он изменяет стиль тега привязки (здесь это делается для предотвращения влияния на браузеры с отключенным JavaScript):

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


Затем цикл завершается добавлением диапазона к якорю:

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


Загрузка встроенного видеообъекта YouTube происходит при нажатии привязки:

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


Это завершается добавлением кода внедрения к родительскому элементу привязки и удалением привязки:

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


Подробнее здесь: https://stackoverflow.com/questions/149 ... ube-videos