• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Vasile Ruscior

Vasile Ruscior

Totul, mai ușor

  • Confidențialitate
  • Contact

Completare la articolul despre încărcarea asincronă a CSS-urilor

Scris pe 17 octombrie 2017 Lasă un comentariu

Acum cinci zile am scris despre încărcarea asincronă a CSS-urilor într-o pagină web. Nu doar că am scris, dar am și implementat metoda pe acest blog.

Toate bune, doar că pagina rămânea în pielea goală, fără CSS, pe anumite browsere. Pentru că, după cum era de așteptat, nu toate navigatoarele știu de <link rel=”preload”>.

Mozilla Firefox de pe Ubuntu și derivatele (ex: Linux Mint) nu știe ce-i aia. Chrome, în schimb, cunoaște. E a lu’ Google, iar Google vrea viteză. Interesant – sau nu – este că Google PageSpeed Insights nu a auzit de <link rel=”preload”>, dar cui îi mai pasă de PageSpeed Insights?

Fiindcă nu mi-am dat seama ce am omis, am citit documentația. Cele mai relevante informații le-am găsit aici. Așa am dat de un javascript care se pune fix după </noscript>. Despre acesta vorbesc:

<script>!function(e){"use strict";var t=function(t,n,r){function o(e){return i.body?e():void setTimeout(function(){o(e)})}function a(){d.addEventListener&&d.removeEventListener("load",a),d.media=r||"all"}var l,i=e.document,d=i.createElement("link");if(n)l=n;else{var s=(i.body||i.getElementsByTagName("head")[0]).childNodes;l=s[s.length-1]}var u=i.styleSheets;d.rel="stylesheet",d.href=t,d.media="only x",o(function(){l.parentNode.insertBefore(d,n?l:l.nextSibling)});var f=function(e){for(var t=d.href,n=u.length;n--;)if(u[n].href===t)return e();setTimeout(function(){f(e)})};return d.addEventListener&&d.addEventListener("load",a),d.onloadcssdefined=f,f(a),d};"undefined"!=typeof exports?exports.loadCSS=t:e.loadCSS=t}("undefined"!=typeof global?global:this),function(e){if(e.loadCSS){var t=loadCSS.relpreload={};if(t.support=function(){try{return e.document.createElement("link").relList.supports("preload")}catch(e){return!1}},t.poly=function(){for(var t=e.document.getElementsByTagName("link"),n=0;n<t.length;n++){var r=t[n];"preload"===r.rel&&"style"===r.getAttribute("as")&&(e.loadCSS(r.href,r,r.getAttribute("media")),r.rel=null)}},!t.support()){t.poly();var n=e.setInterval(t.poly,300);e.addEventListener&&e.addEventListener("load",function(){t.poly(),e.clearInterval(n)}),e.attachEvent&&e.attachEvent("onload",function(){e.clearInterval(n)})}}}(this);</script>

Scriptul de mai sus trebuie plasat după codul din acest articol. Dacă nu vreți să scrieți scriptul de mai sus direct în pagină, descărcați această arhivă. Dezarhivați fișierul și încărcați-l în public_html. După aceea, în loc de „cârnatu“ de mai sus, nu trebuie să scrieți decât atât:

<script src="css_async.js" defer></script>

Partajează asta:

  • Dă clic pentru a partaja pe Twitter(Se deschide într-o fereastră nouă)
  • Dă clic pentru a partaja pe Facebook(Se deschide într-o fereastră nouă)
  • Dă clic pentru partajare pe Telegram(Se deschide într-o fereastră nouă)
  • Dă clic pentru partajare pe WhatsApp(Se deschide într-o fereastră nouă)

Similare

Din categoria: Internet Etichete: cod, html, javascript, web

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi câte un email de fiecare dată când scriu un nou articol.

Reader Interactions

Lasă un răspuns Anulează răspunsul

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Bara principală

Modul întunecat

Blogroll și recomandări

  • Around
  • Stiri Timisoara
  • Breev
  • Blog Star
  • Grig
  • IIRON
  • Stiri de ultima ora
  • Ciurcaș Dan
  • Francisc Vasile
  • Fii Modern

Footer

Au avut ceva de spus

  • Grig la Cum am economisit astăzi 6 lei
  • Vasile Ruscior la Cum am economisit astăzi 6 lei
  • Stefan la Cum am economisit astăzi 6 lei
  • Grig la Sameday EasyBox văzut de AI

Ultimele articole de pe blog

  • Cum am economisit astăzi 6 lei
  • Am cumpărat online de la Mega Image
  • Acțiuni ce se pot realiza cu o mașină de rindeluire
  • Sameday EasyBox văzut de AI

Cauți altceva? Caută aici:

Confidențialitate și cookie-uri: acest site folosește cookie-uri. Dacă continui să folosești acest site web, ești de acord cu utilizarea lor.
Pentru a afla mai multe, inclusiv cum să controlezi cookie-urile, uită-te aici: Politică cookie-uri

© 2012–2023 Vasile Ruscior 🤳 Poți ajunge ușor pe acest blog accesând usor.ro

Sus, Deluță