0

Recently I am seeing there is change is UX pattern while loading many sites. They no longer show loaders/block screens. They display empty blocks and as soon as data is available replaces with same. For eg. Facebook does it while loading wall posts.

Recently I tried to implement it but I faced performance issues and complications about spaces required. Where exactly and how can I design such paradigm? Does this have any name to search more?

1 Answer 1

3

Yes.

The terms you're looking for are:

  • Lazy loading images. This refers to the technique of loading images after the initial page load, to improve the perception of speed.
  • Image placeholders are the block elements you refer to which represent the images while they're being loaded. This technique is occasionally referred to as 'greeking' but that's an incorrect use of the term (greeking is used for text)

The technique can also be used to load blocks of content in addition to images, but it's more commonly used for images because text can typically (but not always) be loaded and rendered quickly.

4
  • aah..its basically useful when we need to load images..but how can UI make a decision on blocks size..coz usually images sizes differ..it should come in another request? Apr 6, 2015 at 4:55
  • @CodeJack implementation is beyond the scope of UX StackExchange, but to help get you started, one approach is to store the image size metadata in a database server-side. When you render the block, you can render the width and height of the block in CSS, then lazy-load the image to speed up the load time.
    – tohster
    Apr 6, 2015 at 5:00
  • WARNING: I think "Lazy Loading" actually referrers to another technique - in which the loading of assets are delayed until the user really needs them. For example, and image is only loaded when its container is scrolled into view. For references, see tinyurl.com/kondhev, and tinyurl.com/m3snb6h.
    – V Maharajh
    May 21, 2015 at 0:49
  • Vivek, as with many technology terms, there isn't a canonical definition here but typically i think lazy loading refers to the asynchronous loading of content outside the main body, usually in order to speed perceived load time. The async timing can be on-demand (e.g. infinite scroll loaded) or scheduled. But YMMV as this is not a precisely defined pattern.
    – tohster
    May 21, 2015 at 0:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.