Git Product home page Git Product logo

lazyload-demo's Introduction

Implementing Loading Indicators

Facebook did a survey and they found user perception changed because of 1 icon: the loading indicator.

Experiment

  • Using their own indicator (vertical bars), people blamed loading performance on Facebook's mobile app.

  • Using an iOS-styled indicator, people attributed loading performance on the Apple operating system.

User experience is easily influenced and has broad implications on your program's credibility!

Loading Styles

Eager load: load everything at once

  • For pages that change quickly, i.e. social media feeds, single player games

Lazy load: load bits on demand

  • For heavy assets and slower paced sites, i.e. image galleries, leisurely displays

Hybrid

  • Buffers, i.e. infinite scrolling, multiplayer games

Traffic

Eager loading is reliant on the client side, while lazy-loading is reliant on the server.


Placeholders

Placeholder can be an image or any HTML element (styled div, svg)

Pre-set placeholder

Example SVG

Server-sided processing

drawing

Summary

  1. Server-sided image processing: images shrunk to 200kb
  2. Blur CSS on client side to hide pixelation
  3. Deliver shrunk image, pre-load full image
  4. Render full image and remove blur

Caveat: Flex content

If images are dynamically loaded, varied image sizes means that additional code is needed to make the placeholder scalable, otherwise image dimension changes are jarring and disrupt the content flow of elements.


IntersectionObserver

A condition to send network request is when an element, such as a placeholder, intersects the viewport. Documentation

new IntersectionObserver observer(callback, options);
observer.observe(element)

callback

function(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
	// do stuff
    }
  }
}

Example: color change on scroll

Pre-render image in JS

let myImg = new Image();

myImg.onload = function() {
  // replace placeholder
  // add image element
  document.body.appendChild(myImg);
}

myImg.src = “/location/mountain.png”
  • The onload event must be defined before setting src

Images in JavaScript have a 'complete' property: myImg.complete returns true after onload


Debounce

A function that is deferred every time an input is triggered soon enough. It sets a timer, and when called again, clears and resets the timer. The function runs when the timer finishes.

Most common exmaple is live search, where a search submits the value after the user finishes typing.

let helloWorld = function(){alert("Hello World)};

searchBar.onkeyup = debounce(helloWorld, 1000); //1000 ms
function debounce(callback, wait) {
  var timeout;

  return () => {

    clearTimeout(timeout);

    timeout = setTimeout(() => callback(...arguments), wait);
  };
};

How does it work?

Closures

Variables declared inside a function are limited to the function scope and disappear after the function runs. However, you can keep an inner variable persistent by using it in a nested function (known as a closure). Because every function is stored in a reference, the variables used in a function are also referenced and not garbage collected unless the function is also discarded.

In the debounce function, we need to keep a reference of the same timer, otherwise we'd be creating new timers every time someone presses a key.

Spread syntax

arguments is a reserved keyword that contains the arguments of the function. The ... array spread syntax from ES6 copies contents of the array and applies them to the function.

arrayClone = [...arrayOriginal];

myFunction.apply(null, args) equivalent to myFunction(...args)


Example Site

InstaDictionary

  1. Semantic UI framework to create placeholders
  2. InsersectionObserver on an invisible div at the bottom of the page
  3. Live search with debounce

Future: Native HTML spec?

Google Chrome developers hinted towards adding the attribute to the browser.

<img loading=”lazy” src=... />

https://www.youtube.com/watch?v=ZBvvCdhLKdw

For now, we still need to implement lazy-loading for backwards compatibility.

lazyload-demo's People

Contributors

ceruulean avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.