Help with lazy load website (JS or other)

LocoM · Lapkričio 30, 2019

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.

Vidmantas. · Lapkričio 30, 2019

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.

LocoM · Lapkričio 30, 2019

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

Inn#Progress · Lapkričio 30, 2019

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

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 Lapkričio 30, 2019, nario Inn#Progress

Avice · Lapkričio 30, 2019

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.

NTQ · Gruodžio 1, 2019

@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):

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 Gruodžio 1, 2019, nario NTQ

Prisijungti

Help with lazy load website (JS or other)

Recommended Posts

LocoM

Nuoroda į komentarą

Dalintis per kitą puslapį

📝 Kalbėjimo temos, potemės ✏️

📝 Kalbėjimo temos, potemės ✏️

📝 Kalbėjimo temos, potemės ✏️

Vidmantas.

Nuoroda į komentarą

Dalintis per kitą puslapį

LocoM

Nuoroda į komentarą

Dalintis per kitą puslapį

Inn#Progress

Nuoroda į komentarą

Dalintis per kitą puslapį

Avice

Nuoroda į komentarą

Dalintis per kitą puslapį

NTQ

Nuoroda į komentarą

Dalintis per kitą puslapį

Prisijungti prie diskusijos

Šiame puslapyje naršo: 0 nariai

Skelbimai

Naujausios temos

Naujausi būsenos atnaujinimai

Nustatymai

Teksto formatavimas

Nario nuotrauka

Member

Nustatymai

Populiariausi nariai

Naujienos

Bendruomenė

Prisijungti

Help with lazy load website (JS or other)

Recommended Posts

Nuoroda į komentarą

Dalintis per kitą puslapį

Nuoroda į komentarą

Dalintis per kitą puslapį

Nuoroda į komentarą

Dalintis per kitą puslapį

Nuoroda į komentarą

Dalintis per kitą puslapį

Nuoroda į komentarą

Dalintis per kitą puslapį

Nuoroda į komentarą

Dalintis per kitą puslapį

Prisijungti prie diskusijos

Šiame puslapyje naršo: 0 nariai

Skelbimai

Naujausios temos

Naujausi būsenos atnaujinimai Nustatymai Teksto formatavimas Nario nuotrauka Member Išsaugoti

Nustatymai

Populiariausi nariai

Naujausi būsenos atnaujinimai

Nustatymai

Teksto formatavimas

Nario nuotrauka

Member