LocoM

Help with lazy load website (JS or other)

Recommended Posts

Laba diena, galbūt esate susidūrę ir galėtumėte pagelbėti, noriu padaryti paprastą dalyką (žiūrint iš šono),

Kaip pavizdys turime elementa <div>, noriu jog pradėjus krauti svetainę <div> elementą rodytų tik tada kada jį užkraus pilnai, o kol jį krauną jog rodytu simple gif loading rutuliuką ar koki kitą užraša - loading...

 

Thanks.

Dalintis šį pranešimą


Nuoroda iki šio pranešimo
Dalintis per kitą puslapį

variantas visą page loadint su javascriptu. Vartotojui atėjus jam kraus puslapį per javascript ir užkrovus panaikinsi loadingą. Variantas toks. Arba tą dalį kurią nori.

Dalintis šį pranešimą


Nuoroda iki šio pranešimo
Dalintis per kitą puslapį
21 minutes prieš, Vidmantas. parašė:

variantas visą page loadint su javascriptu. Vartotojui atėjus jam kraus puslapį per javascript ir užkrovus panaikinsi loadingą. Variantas toks. Arba tą dalį kurią nori.

taip tai pailgėja kaip tik dar svetainės pirmas parodymas todėl iš karto kris google reitingas ir visą kitą, turi būti atskirai gražiai fragmentais :D

Dalintis šį pranešimą


Nuoroda iki šio pranešimo
Dalintis per kitą puslapį

Initially nustatai div'ą, kuriame yra gif'as tas ar "loading" tekstas kaip rodoma, t.y. class show kokią nustatai ir tada tiesiog gaudai javascript eventą load ant window objekto, ir jam įvykus nuėmi class nuo div'o. Ir tai beje, tikrai nėra vadinama lazy-loading'u :D

Lazy loading, tai, kai užkrauni puslapio turinį tik tada, kai jo prireikia, kai pavyzdžiui, nueini į puslapio apačią, tada su javascript'u gauni tą contentą.

window.addEventListener('load', () => {
  document.querySelector('xxx').classList.remove("show");
})
Redaguota , nario Inn#Progress

Dalintis šį pranešimą


Nuoroda iki šio pranešimo
Dalintis per kitą puslapį
prieš 3 valandas(-ų), Arminass parašė:

Laba diena, galbūt esate susidūrę ir galėtumėte pagelbėti, noriu padaryti paprastą dalyką (žiūrint iš šono),

Kaip pavizdys turime elementa <div>, noriu jog pradėjus krauti svetainę <div> elementą rodytų tik tada kada jį užkraus pilnai, o kol jį krauną jog rodytu simple gif loading rutuliuką ar koki kitą užraša - loading...

 

Thanks.

kas tame div'e kraunama? , gal imanoma lengvai isprest ilgo krovimo problema. 

Dalintis šį pranešimą


Nuoroda iki šio pranešimo
Dalintis per kitą puslapį

@Arminass Lazy loadinimas tai basically neužkrauti elementų kol vartotojas jų nepamato. Kodėl tai naudinga? Sutaupo serveriams bandwith, taip pat ir iš vartotojo pusės, kadangi galbūt jis nenuscrollins iki puslapio pabaigos, tai jam pamatyti visas tas nuotraukas neprireiks. + padidinimas puslapio krovimosi laikas.

Toks sprendimas yra puikus, jeigu puslapis turi nemažai nuotraukų, pavyzdžiui, kokia nors galerija (kaip Google Images). Jei vartotojas scrollins iki pabaigos, lazy loadinimas nesutaupys bandwith.

Prieš įdedant lazy loadinimą, atsižvelk į scrollbar'ą, kokio jis bus ilgumo. Jeigu mažai nuotraukų, vartotoją gali užknisti lazy loadinimas (daug maloniau palaukti tą ~0.2 sek. ir gauti viską iškarto, be to, naršyklės cachina html, js, css, images).

Pakanka tos teorijos, einame į praktiką.

Loader'is, kuris pasišalins vos tik baigus užkrauti puslapį (nėra false timeout). Suteiks vartotojui ultra-fast speed jausmą naudojantis puslapiu.

HTML sprendimas:
 

<!DOCTYPE html>
<html lang="lt">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta name="viewport" content="width=device-width">
<noscript>
	<style>
		#loader {
			display: none;
		}
	</style>
</noscript>
<script src="js/loader.js"></script>
</head>
<body ondragstart="return false;" ondrop="return false;">
<div id="loader"></div>
<script src="js/website.js"></script>
</body>
</html>

Atsižvelgiame į No-JS vartotojus, reiškiasi jeigu vartotojas neturi JS enablinto, įsigalios <noscript> CSS kodas, kuris paslėps loaderį.

<div id="loader"></div>

Privalo būti pradžioje, iškart po <body>.

Prieš </body> užsidarymą, integruojame pagrindinius JS failus, kurie gali būti heavy. Jokiu būdu nedėk <head> pradžioje, šalia js/loader.js.

<script src="js/website.js"></script>
</body>

js/website.js talpink visą likusį JS kodą, kad ir didžiulio ilgumo.

Dabar js/loader.js vidinis kodas:

Reikia apsirašyti iš jQuery bibliotekos kelis VanillaJS efektus, t. y. fadeIn, fadeOut, kad gražiau loaderis pasislėptų.

function fadeIn(element, ms)
{
	'use strict';

	if (!element)
	{
		return;
	}

	element.style.opacity = 0;
	element.style.filter = 'alpha(opacity=0)';
	element.style.display = 'inline-block';
	element.style.visibility = 'visible';

	switch(ms) {
		case 'slow':
			ms = 600;
			break;
		case 'fast':
			ms = 400;
			break;
		default:
			break;
	}

	if (ms) {
		var opacity = 0;
		var timer = setInterval(function() {
			opacity += 50 / ms;
			if(opacity >= 1)
			{
			clearInterval(timer);
			opacity = 1;
			}
			element.style.opacity = opacity;
			element.style.filter = 'alpha(opacity=' + opacity * 100 + ')';
		}, 50);
	} else {
		element.style.opacity = 1;
		element.style.filter = 'alpha(opacity=1)';
	}
}

function fadeOut(element, ms)
{
	'use strict';

	if (!element)
	{
		return;
	}

	switch(ms) {
		case 'slow':
			ms = 600;
			break;
		case 'fast':
			ms = 400;
			break;
		default:
			break;
	}

	if (ms) {
		var opacity = 1;
		var timer = setInterval(function() {
			opacity -= 50 / ms;
			if (opacity <= 0) {
				clearInterval(timer);
				opacity = 0;
				element.style.display = 'none';
				element.style.visibility = 'hidden';
			}

			element.style.opacity = opacity;
			element.style.filter = 'alpha(opacity=' + opacity * 100 + ')';
		}, 50);
	} else {
		element.style.opacity = 0;
		element.style.filter = 'alpha(opacity=0)';
		element.style.display = 'none';
		element.style.visibility = 'hidden';
	}
}

window.onload = function() {
	'use strict';

	fadeOut(document.getElementById('loader'), 'fast');
}

CSS vidus:

#loader {
  	/* Jeigu CSS failas atskirame aplankale, pvz, css/pavadinimas.css, tai (../) sako grįžk atgal ir ieškok kur index bus.
  	images/loader.gif loaderio gif'as.
  	*/
	background: rgba(0, 0, 0, 0.8) url('../images/loader.gif') no-repeat center fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 999;
}

Aš naudoju gan gražų loaderį, kuris puikiai suderintas prie bet kokio dizaino.

Jį gali atsisiųsti čia (įdėjau į ZIP, kad file uploaderiai nesumažintų kokybės) – http://www.mediafire.com/file/dq8a6hciiiu6r2r/loader.zip/file

Atrodys taip (background spalva permatoma, gali bet kada pakeisti į bet kokią kitą, tik ne baltą, nes loader'io GIF baltas):

e0225fcdbc156c42a4f5b58092dc7b5b797.PNG

Kaip dėl Ajax užklausų loaderio?

var loader = document.getElementById('loader');

fadeIn(loader, 'fast');

var ajax = new XMLHttpRequest();

ajax.open('POST', 'FAILO NUORODA', true);
ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

ajax.onreadystatechange = function() {
	if (ajax.readyState === 4 && ajax.status === 200) {
		var ajax_response = ajax.responseText;

      	// Turi būti pridėtas HTML kode <div id="status"></div>, kad JS pridėtų gautą atsakymą iš AJAX.
		document.getElementById('status').innerHTML = ajax_response;
		
		fadeOut(loader, 'fast');
	}
  	// Pasirūpink, kad jeigu įvyktų kažkokia klaida, loaderį irgi pašalintų.
}

ajax.send();

Paprasčiausiai prikeliame loaderį iš naujo.

Tame <div id="status"></div> irgi gali parašyti, kad Kraunama... (gavęs Ajax atsakymą, jį perrašys).

Lazy loadinimą nuotraukomis, vaizdo įrašams gali integruoti pagal Google tutorial'ą (labai paprasta) – https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video

Turėk omenyje, kad aukštesnio kodo nepaveiks.

Redaguota , nario NTQ

Dalintis šį pranešimą


Nuoroda iki šio pranešimo
Dalintis per kitą puslapį

Prisijungti prie diskusijos

Palikti atsakymą galite iš karto, o užsiregistruoti vėliau. Jeigu jau turite paskyrą mūsų forume, Prisijunkite.

Svečias
Atsakyti šioje temoje...

×   Įklijuotas tekstas turi teksto formatavimą.   Pašalinti teksto formatavimą

  Galimi tik 75 veidukai.

×   Nuoroda buvo automatiškai įterpta.   Įterpti nuorodą paprastai

×   Jūsų ankstesnis pranešimas buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.


  • Šiame puslapyje naršo:   0 nariai

    Nėra registruotų narių peržiūrinčių šį forumą.

  • eneba
  • eneba
  • eneba



  • SuperGames programele
  • SuperGames programele