Вчера я решил улучшить способ загрузки моего сайта на YouTube, добавив их только тогда, когда пользователь их запросит. Иногда на странице может быть до 30 видеороликов, и для загрузки потребуется много времени.
Это первый раз, когда я попытался использовать метод «ленивой загрузки», и я подумал, что было бы неплохо спросить:
Что я могу сделать, чтобы улучшить это?
Как я могу сделать его более изящным?
Неужели это полностью упустило точку отложенной загрузки?
JSFiddle.
Игнорируйте стиль, который не имеет значения здесь.
Как это работает, сначала разместив якорь на странице, содержащей идентификатор видео:
Затем jQuery зацикливается на каждый a.youtube-video и создает прозрачный интервал с миниатюрой видео в качестве фона:
$(‘a.youtube-video’).each(function() var videoId = $(this).attr(‘data-video’);
var videoThumbnail = «http://img.youtube.com/vi/» + videoId + «/0.jpg»;
var videoBackground = $(‘ ‘);
Отложенная загрузка YouTube и iframe без библиотек Ленивая загрузка для сайта
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 = «http://img.youtube.com/vi/» + videoId + «/0.jpg»;
var videoEmbed = $(‘ . ‘);
.
Это заканчивается добавлением кода вставки в родительский ящик и удаление привязки:
$(this).parent().append(videoEmbed);
$(this).hide();
>);
спросил(а) 2023-01-22T19:52:26+03:00 7 месяцев, 3 недели назад
добавить комментарий
пожаловаться
Вы должны установить href, чтобы люди знали, что они будут загружать. Это можно сделать с помощью элемента a при создании страницы или в JS. Он должен быть включен в элемент, если вы хотите, чтобы ваша страница работала для людей, у которых отключен Javascript.
var url = «http://www.youtube.com/watch?v prettyprint-override»>$(this).attr(‘title’, «Click to play video»);
Или создав наложение, подобное тем, что находится в SMH, что делает его более очевидным, что при нажатии на изображение будет воспроизводиться видео. Или и то, и другое.
Также вы не должны прерывать открытие вещей в новом окне, когда люди удерживают клавишу ctrl или command. Я обновил fiddle, но в основном в вашем событии click вам нужно:
JS-решения №3. Отложенная загрузка видео с Youtube
var isCtrlPressed = e.ctrlKey || e.metaKey;
if (isCtrlPressed == true) return;
>
Я знаю, что вы сказали, что игнорируете стиль, но я предпочитаю его, если у заполнителя есть цвет фона, который явно отличается от фона страницы. Если на странице происходит медленная загрузка, я могу сказать, что что-то загружается там, а не просто пустым слоем страницы.
Неужели это полностью упустило точку отложенной загрузки?
Не совсем, но в этом случае это немного бессмысленно. Отложенная загрузка обычно используется, когда загружаемая вещь очень сложна (например, массивная таблица), и поэтому значительно увеличит размер страницы, что сделает первоначальный рендеринг страницы долгое время после того, как пользователь выполнит ссылку.
Несмотря на то, что видеоролики youtube могут загружаться медленнее, они не должны блокировать остальную часть страницы от загрузки и рендеринга, тем самым откладывая загрузку видео, вы получаете небольшую выгоду за небольшую работу.
Я думаю, вы должны измерить, как быстро кто-то может просмотреть страницу, прокрутите вниз, а затем нажмите, чтобы воспроизвести последнее видео. Если это происходит быстрее с отложенной загрузкой, потому что другой флеш-плеер видео не загружен, он все равно может стоить того.
ответил(а) 2023-01-22T19:52:26+03:00 7 месяцев, 3 недели назад
добавить комментарий
пожаловаться
Здесь приведен jsfiddle приведенного ниже кода здесь. (Игрок не отображается правильно, я думаю, что jsfiddle не очень хорошо работает с методом «embed». Я знаю, что он работает на jsfiddle, используя метод iframe, но вы упомянули, что хотите избежать iframes).
Одним из значительных улучшений, как уже упоминалось, является использование swfobject для создания встроенного проигрывателя. При использовании этого метода вы должны создать заполнитель для элемента игрока. Заполнитель будет удален и заменен встроенным при нажатии ссылки.
Я настоятельно рекомендую создать родительский div для ссылки и игрока. Чтобы предотвратить изменение размера элементов при создании встраивания, вы также должны явно указать ширину/высоту элемента контейнера.
Я думаю, что это хорошее использование отложенной загрузки. Хотя флеш-плееры не блокируются при загрузке, они все еще используют множество ресурсов, и я бы оценил страницу, которая изначально представляет собой набор миниатюр.
Разметка
JavaScript
$(document).ready(function() $(‘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»
>);
// also set the parent container size to prevent flicker
$(this).add($(this).parent()).css( height:315,
width:460,
position:»relative»,
display:»block»,
textAlign:»center»,
color:»#fff»,
fontSize:26
>);
$(this).text(‘Click to load video’);
$(this).append(videoBackground);
>);
$(‘a.youtube-video’).click(function(e) e.preventDefault();
var videoId = $(this).attr(‘data-video’);
var params = < allowScriptAccess: «always», allowFullScreen: «true» >;
var atts = < id: ‘player_’+videoId >;
$(this).hide();
swfobject.embedSWF(
«http://www.youtube.com/v/»+videoId+»?enablejsapi=1version=3″,
‘placeholder_’+videoId, «460», «315», «8», null, null, params, atts);
>);
>);
Источник: progi.pro
Как оптимизировать загрузку видео YouTube на WordPress
При добавлении видео Youtube из WordPress , то Ressources плеера загружаются автоматически, что может повлиять на время загрузки страниц. Чтобы облегчить отображение видеороликов Youtube на ваших страницах, я покажу вам, как использовать плагин « WP YouTube Lyte »Доступно на WordPress.org
Как установить и настроить плагин «WP Youtube Lyte»
После установки и активации плагин , новое подменю » WP YouTube Lyte Будет добавлено в меню Настройки . Щелкните по нему, чтобы перейти на страницу настроек последнего.
На этой новой странице вы можете изменить поведение по умолчанию плагин . Это случай среди других:
- Ширина видео
- Следует ли отображать ссылки под встроенными видео
- Измените положение читателя (влево или вправо)
- Определите формат видео (HD или нет)
Не забудьте сохранить свои изменения.
Как добавить оптимизированное видео
Добавление видео осуществляется через короткий код [ Lyte ] , который принимает несколько параметров. Вам просто нужно получить идентификатор видео и добавить его в короткий код в качестве значения параметра id, чтобы иметь короткий код идентичны следующим:
[ Lyte id = ‘_ SQkWbRublY ‘]
Вы можете решить отображать аудиоплеер из видео, только добавив параметр » audio = ‘истина » «Так, чтобы иметь короткий код идентичны следующим:
[ Lyte id = ‘_ SQkWbRublY » audio = ‘истина ‘]
Ce короткий код отображать аудио-только плеер.
Ce плагин также позволяет вставлять плейлисты по идентификатору плейлиста с помощью атрибута » плейлист = ‘правда » «Как костюм :
[ Lyte id= »A486E741B25F8E00 » playlist text-align: justify;»> И если я не хочу использовать шорткоды
Так что никаких проблем. Le плагин также предусматривает прямое использование пользовательских ссылок на видео YouTubes . Чтобы отобразить видео только в аудиоплеере, вы извлекаете адрес видео и изменяете » HTTP «С» httpa Для ссылки, идентичной следующей:
httpa : // WWW . YouTube . ком / часы ? v = _SQkWbRublY
Для просмотра видео Youtube по миниатюрной ссылке:
httpv : // youtu . быть / _SQkWbRublY
У вас есть на странице сведений о плагин , набор примеров что упростит вашу жизнь .
Вот и все об этом руководстве, которое позволяет вам интегрировать оптимизированные видео Youtube из WordPress . Не стесняйтесь поделиться советом с друзьями в социальных сетях. любимый .
Источник: ru.blogpascher.com
Как отложить загрузку комментариев сайта плагин Lazy Load for Comments?
Добрый день, друзья. Отложенная загрузка комментариев? Реально это, или нет. Да, отложить загрузку комментариев вполне реально. Причем на начальном этапе без всяких плагинов.
Как создать отложенную загрузку комментариев?
Вы когда-нибудь замечали, что на многих сайтах при прокрутке комментариев, они появляются как-бы порциями, по несколько штук. Это очень помогает SEO оптимизации сайта, так как комментарии не все люди читають. Но, когда их сотни, это может создавать дополнительные проблемы.
Страницы с подобным числом комментариев становятся очень тяжелыми, и они долго загружаются. Многие люди просто не выдерживают время загрузки страницы и уходят с подобных ресурсов. Поэтому, чтобы страница стала загружаться как можно быстрее, вебмастера выводят комментарии порциями.
Как ограничить в ВордПресс число комментариев?
Делается это очень просто. Вам нужно зайти в административную панель вашего ресурса. Далее, в левом столбце нужно выбрать «Настройки». У нас откроется ниспадающее меню, где мы выбираем «Обсуждение».
Итак, теперь мы попадаем в «Настройки обсуждения». Как видите, здесь вам представлен большой выбор различных команд и функций, которые вы можете настроить под свой вкус, или как вам более удобно. По стандарту WordPress, данное число установлено на отметки 50 комментариев. Разумеется, вы можете поставить то число, которое вам больше нравится. Например, можно 30.
Мне кажется — не плохо.
Я думаю, многие сейчас скажут: — «К чему тогда применять различные дополнения, если можно просто воспользоваться средствами движка?». Вопрос естественный. Но, тут все зависит от темы вашего сайта. Например, на другом моём сайте установлена тема Innovation-BREATH, в которой просто нет обычных комментариев от WordPress. Там установлены комментарии от Фейсбук.
На многих шаблонах комментарии просто не предусмотрены.