Dnes si příklad z minulého článku rozšíříme o další funkcionalitu. Sám jsem dlouho hledal řešení, jak zamezit zbytečnému kousání stránek, které obsahují větší množství vložených videí. Chtěl jsem možnost přehrání uvnitř článku, ale už se mi tolik nelíbilo, jak se všechno musí dopředu zbytečně načítat. 

Řešení je vcelku triviální a sám už jsem ho mnohokrát použil v jiných případech: daný obsah načteme až po zascrollování. Jak vše uvést do praxe vysvětlím právě v dnešním článku.

JavaScript si rozšíříme o jednu funkci. Upravíme i regulární výraz pro náhradu iframu vlastním blokem kódu. Iframe je totiž stylovatelný jako každý jiný prvek a toho využijeme. Opět musím zdůraznit, že by to šlo i jinak, přidáním dalších elementů, ale není to nutné. Můžeme využít to, co máme.

Základem je, aby se jednotlivým iframům vytiskl prázdný atribut "src". Dokud není zdroj, nic se nenačítá. Zdroj si dočasně uložíme do titulku, který potom přes JavaScript vyměníme. Atributy vyměníme ve chvíli, kdy uživatel na video zascrolluje.

1. JavaScript

Funkce je opět trochu zjednodušená: počítáme jen, jak daleko je zascrollováno. Pokud je video na stránce výš, než je spočtená hodnota, proběhne náhrada a jeho načtení. Toto řešení má výhodu v obrovské jednoduchosti, nevýhodu pak v tom, že když na konci stránky stiskneme F5, bude se načítat samozřejmě všechno. Ale o výpočtu viditelného okna z obou stran tento článek není a daná funkce pro svůj účel postačí.

Nesmíme ani zapomenout na její opětovné volání při resizu okna, protože u responzivních webů se hodnoty po resizu mohou (a měly by) změnit.

$.fn.showWhenScrolled=function(){
	var self = this;
	
	this.init = function(){
		self.each(function(){
			var self_top   = $(this).offset().top;
			var scroll_top = $(window).scrollTop();
			var win_height = $(window).height();
			var frame      = $(this).find('iframe');
			if(scroll_top > (self_top - win_height)){
				if(!frame.attr('src')){
					frame.attr({src:frame.attr('title')});
				}
			}
		});
	};
	
	$(window).scroll(function(){
		self.init();
	}).resize(function(){
		self.init();
	});
	
	self.init();
};

$('.youtube-container').showWhenScrolled();

2. CSS

Do stylu přidáme jediný řádek, a to vzhled prázdného rámu.

.youtube-container iframe {background:rgba(0,0,0,0.25) url(youtube-loading.gif) no-repeat 50% 50%;}

3. HTML / PHP

Na závěr musíme upravit i způsobe renderování, aby se mohl atribut "src" rovnou vyměnit s titulkem.

$youtube_replace_pattern = '
	<span class="youtube-container">
		<a href="javascript:;">
			<img src="images/youtube-resizer.png" alt="" class="youtube-resizer" />
			<img src="images/youtube-resizer-tablet.png" alt="" class="youtube-resizer tablet-resizer" />
		</a>
		
			
			
			_
			_
		
	
	</span>
';

$article_text = preg_replace('/\<iframe([^>]+)src="([^"]*)"([^>]+)><\/iframe>/', $youtube_replace_pattern, $article_text);

Ukázka v praxi

Jako ukázku jsem si připravil část jednoho ze svých článků. Zkuste si různě refreshovat, resizovat, scrollovat a uvidíte, jakým způsobem to všechno pracuje.

YouTube progressive load ukázka
YouTube progressive load ke stažení