Есть сайт на нем долго загружается контент. Там много слайдеров + видосы с ютуба. Так вот думаю сделать поблочную загрузку ну типо в каждом блоке крутится гифка загрузится и когда блок полностью загружен показать пользователю. Либо какие у вас идеи? как увеличить скорость? Пробовал оптимизировать css, js, картинки чуток больше стала но не намного.
у Вас там видео сразу подгружается.. а это не очень хорошо)) вместо видео лучше грузить картинки превьюхи ютубовской.. тогда получится что вместо роликов - будет простая картинка.. а при нажатии на нее - уже подгружать видео..
Вот модуль вставки ютуб видео для форума на движке SMF https://custom.simplemachines.org/mods/index.php?mod=3268 в этом модуле как раз реализовано то что я описал... там же есть JS скрипт который при нажатии на статическую картинку отрабатывает загрузку видео. . если препарируете модуль - то это может ускорить процесс)
спасибо --- Добавлено --- Слушай а я что то немогу найти инструкцию по нему. Моды никогда не ставил. МОжешь рассказать что к чему?
да нет там инструкции... это модуль для форума.. просто препарируешь и все)) дайте мне 5 минут - я просмотрю его - ключевые вещи сюда выложу..
1. Смотрим в моде файл /Source/OharaYTEmbed.php в нем есть регулярка, судя по коду с помощью нее мы берем ИД видео. PHP: $youtube = '~(?<=[\s>\.(;\'"\]]|^)(?<!e\])(?:http|https):\/\/[\w\-_%@:|]?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=|\/watch\?.+&v=))([\w-]{11})(?:[^\s|\<|\[]+)?(?=[^\w-]|$)(?![?=&+%\w.-]*(?:[\'"][^<>]*>|<\/a> ))[?=&+%\w.-]*[\/\w\-_\~%@\?;=#}\\\\]?~ix'; тут похоже парсится сообщение в котором есть ссылка на youtube... PHP: // Is this a YouTube video url? $message = preg_replace_callback( $youtube, function ($matches) { return '[youtube]'. $matches[1] .'[/youtube]'; }, $message ); в итоге в сообщение всталяется вот вто то такое [youtube]тут_ИД_видео[/youtube] 2. Дальше смотрим файл ohyoutube.js вот тут Код (Javascript): _oh.prototype.getImage = function(youtubeID) { var imgsrc = '', index, len, imageTypes = ['hqdefault', 'mqdefault', 'sddefault', 'maxresdefault']; for (index = 0, len = imageTypes.length; index < len; ++index) { imgsrc = '//i.ytimg.com/vi/'+ youtubeID +'/'+ imageTypes[index] +'.jpg'; if (imgsrc.width !=0){ break; } } // Still no image, show the default one if (imgsrc.width ==0){ imgsrc = '//i.ytimg.com/vi/'+ youtubeID +'/default.jpg'; } return imgsrc; }; у нас строятся ссылки на картинки.. (см. переменную imgsrc) вот тут мы слушаем клик по картинки с видео, и при клике открываем видео.. Код (Javascript): _element.one('click', function(){ var iframe_url = '//www.youtube.com/embed/' + _element.videoID + '?autoplay=1&autohide=1'; if (_element.data('params')){ iframe_url+='&'+ _element.data('params'); } // The height and width of the iFrame should be the same as parent var iframe = $('<iframe/>', {'frameborder': '0', 'src': iframe_url, 'width': _element.imgWidth, 'height': _element.imgHeight, 'allowfullscreen': 'allowfullscreen'}); // Append the YouTube HTML5 Player. _element.css({'background-image': 'none'}).append(iframe); _element.children('.youtube_play').css({'height': '0'}); }); вроде бы так... я не большой спец по JS.. может меня сейчас более опытные коллеги поправят если я не прав.. исходя из того что вверху написано уже можно сделать отображение картинок вместо роликов и подгрузку роликов при клике по картинке.. --- Добавлено --- на примере вот к примеру видео это его ИД 3Qtg8bPgEww вот так можно взять картинку превью этого видео http://i.ytimg.com/vi/3Qtg8bPgEww/hqdefault.jpg а потом уже с помощью onclick подгружать iframe Код (Javascript): var iframe = $('<iframe/>', {'frameborder': '0', 'src': iframe_url, 'width': _element.imgWidth, 'height': _element.imgHeight, 'allowfullscreen': 'allowfullscreen'}); --- Добавлено --- понятно объяснил?))
отлично)) моментально открывается)) --- Добавлено --- Мы наверно чуть чуть друг друга не понимаем) когда копируешь код с ютуба - то это iframe и когда страница открывается - грузится его содержимое. а в этом случае - вместо фрейма просто статичная картинка.. а при клике по ней уже грузится содержимое фрейма)) поэтому можно хоть 100 видео так на странице разместить - и не будет тормозов)