Lazy loading the lazy way

An article, posted about 4 years ago filed in images, web, optimization, javascript, html & coffeeandorange.

Below is a simple, lazy, technique I applied in a collection management tool where its users wanted to browse over 10.000 images without scroll-hijacking or pagination. Sure, only the HTML weight several MB’s at once, but for this particular application used by professionals it is worth the weight. But performance was too heavily affected by downloading all these separate images.

So let’s have a look how I solved this.

What does the code below do?

You rightly guessed that it won’t display any image to say ~95% of the users. The 5% who have disabled Javascript however, will see it.

The 95% who do have Javascript can enjoy the image simply by moving the img tag out of the noscript tag using a bit of JavaScript:

ELEMENTS_QUERY = "noscript[data-lazy=\"lazy-load\"]"

decode_entities = (encodedString)->
   ## required for IE and Safari
   textArea = document.createElement('textarea')

Continue reading...

Tag descriptor

Free stock images

An article, posted more than 5 years ago filed in stock, images, free & overview.

A selection of resources with free imagery, often CC0 or CC-BY licensed.

Continue reading...

murb blog