#lazyload

b_b @b_b PUBLIC DOMAIN 10/09/2017

4

4

Lozad.js
▻https://github.com/ApoorvSaxena/lozad.js
Highly performant, light ~0.5kb and configurable #lazy_loader in pure JS with no dependencies for #images, #iframes and more, using #IntersectionObserver API
Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.
Making this more efficient and performant is what IntersectionObserver is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.
En lien avec ▻https://seenthis.net/messages/619904

b_b @b_b PUBLIC DOMAIN
- RastaPopoulos @rastapopoulos CC BY-NC 10/09/2017
  
  Ça a l’air super !
  #intégration #web #webperf #lazyload
  
  RastaPopoulos @rastapopoulos CC BY-NC
Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 28/04/2016

A standard way to lazy load images
▻https://discourse.wicg.io/t/a-standard-way-to-lazy-load-images/1153
#lazyload_image_ServiceWorker_discussion_standard_clevermarks

Nicolas Hoizey @nhoizey CC BY-NC-SA

Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 24/02/2016

CPP - Lazy loading of images
▻http://yoavweiss.github.io/ContentPerformancePolicy/#lazy-loading-of-images
“Images on the page that are outside of the initial viewport can often be downloaded and delay the page’s onload event without actually being seen by the user. That issue is significantly worse on mobile, where the viewports can be very long. A lazy loading directive can be used to indicate the browser that images outside of the first few images are all lazy loaded. The browser can then act on that directive and avoid loading those images.”
#lazyload_image_standard_draft_CPP_clevermarks

Nicolas Hoizey @nhoizey CC BY-NC-SA

Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 23/09/2015

Quick trick: using #template to delay loading of images | Christian Heilmann
▻http://christianheilmann.com/2015/09/08/quick-trick-using-template-to-delay-loading-of-images
Tags: #HTML template #lazyload #image #clevermarks

Nicolas Hoizey @nhoizey CC BY-NC-SA

Écrire un commentaire
0gust1 @0gust1 CC BY-NC 13/11/2013

2

2

►http://strabic.fr
une revue numérique indépendante
traitant de design, de diy et de combinaisons spatiales
Strabic.fr est une revue oblique qui parle de conception et d’arts de faire.
Strabic.fr est née d’une volonté profonde : parler de design sans paillettes ni projecteurs, de forme et de fond, de ce qui se fait et ce qui peut se faire, de pourquoi et comment cela se fait, d’extravagance et d’excursions, avec exigence et exotisme.
Strabic.fr est une revue à géométrie variable mais à mémoire de forme. Elle se fabrique dans nos cuisines, à l’heure de l’apéritif ou du café, entre amis et avec ceux qui le deviennent.
via @julienb , à l’occasion d’un rafraichissement du site.
#design #diy #combinaisons_spatiales
- #Google
0gust1 @0gust1 CC BY-NC
- habbon @habbon 13/11/2013
  
  sous #SPIP #flat #plat #webdesign
  
  habbon @habbon
- Ari @ari 14/11/2013
  
  Corps de texte en 21, chapô en 26, sérieux… On est encore pas tous et toutes sous tablettes ;) Après avoir pesté contre les typos trop petites, il va falloir râler contre les mots trop gros :-/
  
  Ari @ari
- 0gust1 @0gust1 CC BY-NC 14/11/2013
  
  Je n’ai plus de tablette (je viens de finir le cote d’or aux noisettes).
  Pour la lecture, le corps de texte est sympa je trouve (mais je n’irais pas plus gros... on se perd vite dans le texte). Par contre, les titres, intertitres, chapeaux, etc... sont assez durs avec les yeux. Sinon, j’aime assez ce que j’ai pu lire du contenu :)
  
  0gust1 @0gust1 CC BY-NC
- habbon @habbon 14/11/2013
  
  @ari Les boss de la typo sont sur ce genre de tailles : ▻http://ia.net/blog (en em, mais ça revient au même avec 16px comme police de navigateur). ►http://medium.com est sur du 22px. Après, ce sont des textes en anglais, ma lecture n’est peut-être pas la même. @orientXXI y va fort aussi sur les chapô : 1.6em. Sur le texte de paragraphe c’est plus léger, et il tente de la césure.
  A vrai dire, je trouve encore que c’est chez strabic que c’est le mieux réussit. Le rapport longueur de ligne / hauteur de ligne / taille de caractères. Par contre leurs citations sont pas top, je les mettrais un peu de retrait, avec un poil plus d’espace, voir dans une autre couleur.
  
  habbon @habbon
- Ari @ari 14/11/2013
  
  @habbon quand t’arrives d’un Indymedia, ça fait mal aux yeux ^^ Non mais sinon c’est pas mal, même si je préfère ia.net pour le corps de texte de l’article.
  Sinon quelqu’un-e aurait une idée de la technique utilisée pour faire apparaître les images au chargement, c’est un plugin spip ça ?
  #beau et pis #spip_blog aussi pour les jolis sites innovants sous Spip non ? (en plus y’a plein d’articles intéressants effectivement).
  
  Ari @ari
- habbon @habbon 14/11/2013
  
  Google « #lazyloading images ».
  Moi j’ai tendance à trouver ça pénible.
  Faudrait qu’ils chargent peut-être un peu avant qu’on arrive dessus (c’est peut-être déjà la cas ceci dit).
  Je suis pas sûr qu’on gagne beaucoup l’un dans l’autre entre le côté pénible de l’image qui « flash » et le fait que la page se charge plus rapidement.
  Une attitude où on charge au plus vite ce qui est visible puis ce qui n’est pas visible sans attendre qu’on l’atteigne me parait une meilleur pratique.
  Si des gens ici ont des idée pour bien faire ce genre de choses...
  #JS #optimisation
  
  habbon @habbon
- habbon @habbon 14/11/2013
  
  Ça me fait penser à ce post de Cerdic ce que je dis juste au-dessus : ▻http://blog.nursit.net/slider-d-images-attention-au-temps-de-chargement.html
  #Webperformance
  
  habbon @habbon
- b_b @b_b PUBLIC DOMAIN 22/11/2013
  
  @ari pour les jolis sites innovants sous #spip ça serait plus ►http://herbier.spip.net ;)
  
  b_b @b_b PUBLIC DOMAIN
- habbon @habbon 22/11/2013
  
  @ari @b_b sans le h
  
  habbon @habbon
- b_b @b_b PUBLIC DOMAIN 23/11/2013
  
  oups sorry, corrigé
  
  b_b @b_b PUBLIC DOMAIN
- Ari @ari 23/11/2013
  
  @b_b, herbier.spip.net me paraît parcellaire et n’annonce pas les reliftings, non ? J’ai pas le temps de regarder tous les sites de la galaxie, si le spip_blog peut proposer un digest ou juste signaler un ou deux nouveaux sites remarquables tous les mois, ce serait vraiment bien :)
  
  Ari @ari
- tetue @tetue CC BY 23/11/2013
  
  @Ari : l’Herbier propose effectivement une sélection, de sites tels qu’ils apparaissaient à un moment T sur la toile. C’est surtout un album souvenir.
  Sinon, hors la lisibilité réussie des pages de texte, c’est quand même très laid, Strabic :(
  
  tetue @tetue CC BY
Écrire un commentaire
Seenthis @seenthis CC BY-SA 28/11/2010

Le chargement #oembed (les vidéos Youtube, les photos Flickr...) passe en #lazyload. Ce qui signifie qu’elles ne se chargent que si elles sont visibles dans la fenêtre.
@monolecte, est-ce que ça t’accélère ta page ?

Seenthis @seenthis CC BY-SA

Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 22/11/2010

jQuery LazyLoad Advertising Plugin - Web2ajaX
►http://jqueryad.web2ajax.fr
jQuery LazyLoad Ad
#jquery #lazyload #plugin #publicité #performance #web #dev #javascript #clevermarks

Nicolas Hoizey @nhoizey CC BY-NC-SA

Écrire un commentaire