Я использую https://gtmetrix.com для диагностики проблем с моей скоростью страницы.
На этой странице есть одно встроенное видео YouTube, и GTMetrix заявляет, что это видео JS-вызовы замедляют скорость загрузки страницы.
Это вызов:
<iframe width="640" height="360" src="https://www.youtube.com/embed/PgcokT0AWHo" frameborder="0" allowfullscreen></iframe>
ОБНОВЛЕНИЕ: по состоянию на октябрь 2019 года это больше не работает (спасибо @CpnCrunch за обновление). В тех случаях, когда это не влияет на работу пользователя, вы, очевидно, можете добавить время ожидания 1000 мс после загрузки страницы, чтобы оно вступить в силу.
Это пример динамической настройки src при загрузке страницы с использованием чистого решения JS. Использование прослушивателей событий вместо window.onload, поскольку с последним может быть установлено только одно событие, и оно переопределит любое прецедентное событие window.onload:
<iframe id="videoFrame" width="640" height="360" src="" frameborder="0" allowfullscreen></iframe>
<script>
function setVideoFrame(){
document.getElementById('videoFrame').src = 'http://example.com/';
}
if (window.addEventListener) // W3C DOM
window.addEventListener('load', setVideoFrame, false);
else if (window.attachEvent) { // IE DOM
window.attachEvent('onload', setVideoFrame);
}else{ //NO SUPPORT, lauching right now
setVideoFrame();
}
</script>У меня была такая же проблема для веб-сайта, который я делал, и я наткнулся на эту ссылку. Как "ленивая загрузка" встроенных видео YouTube
По сути, при загрузке страницы на веб-странице будет отображаться поддельный раздел проигрывателя youtube (сделанный из css и миниатюры видеоизображения), и когда пользователь нажмет на него, он заменит этот раздел поддельного игрока на Iframe и что, когда игрок будет загружен.
Код с веб-сайта
(function() {
// get all video wrapper divs
var youtube = document.querySelectorAll(".youtube");
// iterates through all the divs
for (var i = 0; i < youtube.length; i++) {
/*
gets the video id we mentioned in the data-embed attribute
to generate image thumbnail urls, youtube has several
resolutions.
- mqdefault 320 x 180
- hqdefault 480 x 360
- sddefault - 640 x 480
- maxresdefault - 1920 x 1080
*/
var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/sddefault.jpg";
/*
creates new image and sets the source attribute to the thumbnail
url we generated above and sets it to load the image on page load
*/
var image = new Image();
image.src = source;
image.addEventListener("load", function() {
youtube[i].appendChild(image);
}(i));
/*
below is where the magic happens, we attach click listeners to the
video embed divs and when clicked we create a new iframe and sets
it inside the video wrapper div and only then will the js files
associated with the embedded video be loaded
*/
youtube[i].addEventListener("click", function() {
var iframe = document.createElement("iframe");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&autoplay=1");
this.innerHTML = "";
this.appendChild(iframe);
});
};
})();html {
background-color: #f3f3f3;
}
.wrapper {
max-width: 680px;
margin: 60px auto;
padding: 0 20px;
}
.youtube {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.youtube img {
width: 100%;
top: -16.82%;
left: 0;
opacity: 0.7;
}
.youtube .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0, 0, 0, 0.6);
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.youtube .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0);
}
.youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}<!-- (1) video wrapper, data-embed contains ID of the Youtube video-->
<div class="youtube" data-embed="AqcjdkPMPJA">
<!-- (2) the "play" button -->
<div class="play-button"></div>
</div>Посмотрите приведенные примеры использования iframe с атрибутом src и с динамическим атрибутом src с результатами GTMatrix.
<html>
<head>
<title>-</title>
</head>
<body>
<iframe id="myvideo" width="640" height="360" src="https://www.youtube.com/embed/PgcokT0AWHo" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Вот результат GTMatrix для кода выше.
Теперь проверьте динамический код src.
<html>
<head>
<title>-</title>
<script type="text/javascript">
function test()
{
document.getElementById('myvideo').src = 'https://www.youtube.com/embed/PgcokT0AWHo';
}
</script>
</head>
<body onload="test();">
<iframe id="myvideo" width="640" height="360" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Теперь посмотрим на результат GTMatrix после применения динамического src к iframe.
Надеюсь, эти примеры помогут вам оценить вашу проблему.
Один из возможных подходов заключается в том, чтобы не использовать iframe напрямую, а добавлять его на какой-либо прослушиватель событий, например щелчок.
Посмотрите на это решение, которое я использую на своем веб-сайте с давних времен (бесстыдное продвижение - Demo)
Здесь я показываю изображение предварительного просмотра с кнопкой воспроизведения. Когда пользователь нажимает на изображение, YouTube iframe динамически добавляется на страницу, сохраняя тонны байтов при загрузке страницы. Приведенный ниже код почти готов к производству и может использоваться в соответствии с вашими требованиями.
if (document.querySelector("#videoPlayer")) {
document.querySelector("#videoPlayer a").addEventListener("click", playVideo);
}
function playVideo() {
var player = document.getElementById("videoPlayer");
var id = player.getAttribute("data-id");
player.classList.add("loaded");
var src =
"https://www.youtube.com/embed/" +
id +
"?autoplay=1&autohide=1&rel=0&modestbranding=1&showinfo=0&border=0&wmode=opaque&theme=light&iv_load_policy=3";
var iframe =
"<iframe width='100%' height='100%' src='" +
src +
"' scrolling='no frameborder='0' allowfullscreen></iframe>";
player.innerHTML = iframe;
return false;
}#videoPlayer {
background-color: #000;
max-width: 100%;
overflow: hidden;
position: relative;
cursor: pointer;
height: 380px;
width: 100%;
margin: 1em auto;
}
#videoPlayer:after {
content: attr(data-title);
position: absolute;
bottom: 0;
left: 0;
display: block;
background: rgba(0, 0, 0, 0.5);
width: 100%;
max-height: 100px;
text-align: left;
padding: 1em;
font-size: 1.2em;
color: #fff;
transition: opacity 0.7s ease-in-out;
}
#videoPlayer:hover:after {
opacity: 0;
}
#videoPlayer .thumb {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.8;
filter: alpha(opacity=80);
transition: all 200ms ease-out;
-webkit-transition: all 200ms ease-out;
}
#videoPlayer .thumb:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
#videoPlayer .play {
filter: alpha(opacity=90);
opacity: 0.9;
height: 97px;
left: 50%;
margin-left: -38px;
margin-top: -38px;
position: absolute;
top: 50%;
width: 136px;
background: url("http://i.imgur.com/TxzC70f.png");
background-repeat: no-repeat;
}
#videoPlayer.loaded:after {
display: none;
}<div id="videoPlayer" data-title="NBA 2K18 - Get Shook Trailer" data-id="lwBqitrE3ww"> <a title="Click to play video : NBA 2K18 - Get Shook Trailer"> <img class="thumb" alt="NBA 2K18 - Get Shook Trailer" src="https://1.bp.blogspot.com/-X4naiytBpyU/WZRt5d3P1iI/AAAAAAAADq8/y4IAHBmh39kqdwu8THECuObG3r9HIfa9wCLcBGAs/s800/nba-2k18-get-shook-trailer-hoopsvilla.jpg" /><span class="play"></span></a></div>
</div>Вы можете заменить:
<iframe src="https://www.youtube.com/embed/LcIytqkbdlo" height="180" width="320"></iframe>
с
<div class="youtube" id="LcIytqkbdlo" style="width: 320px; height: 180px;"></div> <script src="https://labnol.googlecode.com/files/youtube.js"></script>
как показано здесь: https://www.mainstreethost.com/blog/light-youtube-embeds-faster-page-load/
Вы можете найти еще одну полезную статью, в которой рассматривается ваша проблема: https://mikeindustries.com/blog/archive/2007/06/widget-deployment-with-wedje
WEDJE создает кросс-платформенную кросс-браузерную отсрочку, используя объектную модель документа (DOM), чтобы добавить div, создать элемент сценария, а затем добавить элемент сценария в div, все с JavaScript. Пример метода:
<script type="text/javascript"> // create div below
(function( ){document.write('<div id="wedje_div_example">Loading widget...<\/div>');
s=document.createElement('script'); // create script element
s.type="text/javascript"; // assign script to script element
s.src="http://www.example.com/scripts/widget.js";
// assign script s to div element
setTimeout("document.getElementById('wedje_div_example').appendChild(s)",1);})( )
</script>
Когда эти элементы связаны друг с другом таким образом, браузеры, похоже, отделяют загрузку и выполнение прикрепленного JavaScript, делая выполнение виджета асинхронным! Вот соответствующий внешний файл JavaScript, widget.js, который захватывает div, который мы создали ранее, и загружает изображение:
document.getElementById('wedje_div_example').innerHTML+='<img src="https://www.example.com/images/example.gif" width="60" height="60" />';
<iframe width="640" height="360" src="" data-src="https://www.youtube.com/embed/PgcokT0AWHo" frameborder="0" allowfullscreen></iframe>
<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
}
}
}
window.onload = init;
</script>
Я не смог найти подходящих решений, поэтому я написал библиотеку javascript для этого:
https://github.com/groupboard/ytdefer
Сначала оно отображает изображение, а когда пользователь нажимает на него, оно использует API Iframe YouTube для загрузки видео, а затем начинает его воспроизведение (так что два щелчка не требуются).