Pierwsza próba leniwego ładowania (opóźnianie ładowania osadzonych filmów w YouTube) - jak mogę to zrobić z większą wdziękiem?

Question

Wczoraj postanowiłem poprawić sposób, w jaki moja strona internetowa ładuje filmy z YouTube, umieszczając je tylko wtedy, gdy użytkownik ich zażąda. Czasami strona może zawierać nawet 30 filmów, a wczytanie jej zajmie dużo czasu.

Jest to pierwszy raz, kiedy próbował się „lazy loading” metody niczego, i pomyślałem, że byłoby dobrze warto zapytać:

Co mogę zrobić, aby poprawić w tej sprawie?

Jak mogę uczynić to nieco bardziej wdzięku?

Czy całkowicie mija się z odroczonym ładowaniem?

JSFiddle.

Zignoruj ​​styl, ponieważ nie ma to znaczenia.

---

Sposób ten działa jest najpierw umieszczając kotwicę na stronie zawierającej dany film ID:

<a href="#" data-video="FzRH3iTQPrk" class="youtube-video"> 

JQuery za czym pętle przez każdy a.youtube-video i tworzy przezroczystą przęsło z miniaturki filmu jako jego tło:

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

    var videoBackground = $('<span class="youtube-thumbnail"></span>'); 

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

następnie modyfikuje stylizacji znacznika zakotwiczenia (odbywa się to tu, aby zapobiec wpływając przeglądarki z JavaScript osób niepełnosprawnych):

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

Następnie kończy się pętlę poprzez dodanie rozpiętości do kotwicy:

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

Załadunek obiektu osadzonego wideo YouTube pojawia się na kotwicy kliknij:

$('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 = $('<object> ... </object>');  
     ... 

Ta operacja kończy się po dodaniu kodu do osadzenia w rodzicu kotwicy i usunięciu zakotwiczenia:

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

Answer 1

Powinieneś ustawić href, aby ludzie wiedzieli, co będą ładować. Można to zrobić na elemencie podczas generowania strony lub w JS. To musi być na elemencie, jeśli chcesz, aby twoja strona działała dla osób, które mają wyłączoną obsługę JavaScript.

var url = "http://www.youtube.com/watch?v=" + videoId; 
$(this).attr('href', url); 

Należy także powiedzieć ludziom, co się stanie, gdy klikną albo przez ustawienie tytuł:

$(this).attr('title', "Click to play video"); 

lub tworząc nakładkę, jak te na SMH co czyni go bardziej oczywiste, że kliknięcie na obraz odtworzy wideo. Lub oba.

Nie powinieneś również dzielić otwierania rzeczy w nowym oknie, gdy ludzie trzymają wciśnięty klawisz CTRL lub Command.I uaktualniony fiddle ale w zasadzie w przypadku kliknięcia trzeba:

var isCtrlPressed = e.ctrlKey || e.metaKey; 
if (isCtrlPressed == true){ 
    return; 
} 

Wiem, mówiłeś zignorować styl, ale wolę go jeśli zastępczy ma kolor tła, który jest oczywiście różny od tła strony. Jeśli strona powoli ładuje się, mogę powiedzieć, że coś się tam załaduje, a nie jest tylko pustym fragmentem strony.

Czy całkowicie mija się z odroczonym ładowaniem?

Nie całkowicie, ale w tym przypadku jest lekko bezsensowne. Odroczone ładowanie jest zwykle używane, gdy ładowany obiekt jest bardzo złożony (np. Olbrzymi stół), a więc znacznie zwiększyłby rozmiar strony, co spowodowałoby, że początkowy render strony byłby długi czas po tym, jak użytkownik podążył za linkiem .

Mimo że filmy youtube mogą być powolne do załadowania, nie powinny w rzeczywistości blokować reszty strony przed ładowaniem i renderowaniem w międzyczasie, więc odroczenie ładowania filmów daje tylko niewielką korzyść przy odrobinie pracy.

Sądzę, że powinieneś zmierzyć, jak szybko ktoś może przeglądać stronę, przewinąć do dołu, a następnie kliknąć, aby odtworzyć ostatni film. Jeśli jest to szybsze z odroczonym ładowaniem, ponieważ inne filmy flash player nie są ładowane, to nadal może być tego warte.

Answer 2

Istnieje jsfiddle poniższego kodu here. (Odtwarzacz nie pokazuje się poprawnie, myślę, że jsfiddle nie działa dobrze z "metodą osadzania" .Wiem, że działa na jsfiddle za pomocą metody iframe, ale wspomniałeś, że chcesz uniknąć iframe).

Jedną z większych poprawek, jak już wspomniano, jest użycie swfobject do wygenerowania osadzenia gracza. Korzystając z tej metody, musisz utworzyć element zastępczy dla elementu gracza. Symbol zastępczy zostanie usunięty i zastąpiony przez osadzenie po kliknięciu łącza. Gorąco polecam tworzenie elementu nadrzędnego dla łącza i odtwarzacza. Aby zapobiec zmianie rozmiaru elementów podczas generowania osadzenia, należy również jawnie ustawić szerokość/wysokość elementu kontenera.

Myślę, że to miłe wykorzystanie odroczonego ładowania. Chociaż odtwarzacze flash nie blokują się przy obciążeniu, nadal korzystają z wielu zasobów i doceniłbym stronę, która początkowo prezentuje się jako zestaw miniatur.

Markup

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"> 
</script> 

<div class="container"> 
    <div id="placeholder_FzRH3iTQPrk"></div> 
    <a href="#" data-video="FzRH3iTQPrk" class="youtube-video"></a> 
</div> 
<div class="container"> 
    <div id="placeholder_go43XeW6Wg4"></div> 
    <a href="#" data-video="go43XeW6Wg4" class="youtube-video"></a> 
</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 = $('<span class="youtube-thumbnail"></span>'); 
     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=1&playerapiid=ytplayer&version=3", 
      'placeholder_'+videoId, "460", "315", "8", null, null, params, atts); 

    }); 
});