From dffe9be11174b668c5705fcbcbd80de78d8bad1e Mon Sep 17 00:00:00 2001 From: gerdneuman Date: Sun, 17 Jun 2018 14:15:34 +0200 Subject: [PATCH] =?UTF-8?q?Added=20recommendaton=20NOT=20to=20use=201?= =?UTF-8?q?=C3=971=20pixel=20GIF=20placeholders=20(#214)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #212 --- README.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d1cf7a71..2de4286b 100644 --- a/README.md +++ b/README.md @@ -430,7 +430,7 @@ There's also a **useful SASS mixin** to [maintain aspect ratio](https://css-tric ### Show the images *while* they load -Images should be shown while they load, and not after, to give your users the best perceived performance. This is especially true if you use a progressive loading format like **progressive JPEG**. +Images should be shown while they load, and not after, to give your users the best perceived performance. This is especially true if you use a progressive loading format like **Progressive JPEG**. In order to make your images visible as soon as LazyLoad sets the `src`/`srcset` attribute to it, you can either: @@ -443,7 +443,17 @@ img:not([src]) { } ``` -Or do it using the **CSS classes** set by LazyLoad when loading starts - see [API](#api). +Or instead of the above `:not()` selector do it using the **CSS classes** of `class_loading` and `class_loaded` set by LazyLoad when loading starts or is completed - see [API](#api). + +#### Do NOT use 1×1 pixel GIF placeholders + +Some lazy loading solutions sometimes advise to use transparent 1×1 pixel GIF placeholders as `src` and `srcset` until the image is loaded. We do *not* recommend this because: + +* If you don't put anything in the src, when LazyLoad copies the data-src in the src, the image is shown while loading by the browser (good perceived performance especially when used with progressive JPEG: User sees preview of image when browser *starts* loading) +* If you put something in the src (like a transparent GIF), when LazyLoad copies the data-src in the src, the browser *waits* until the new image is loaded, then replaces the image (so the perceived performance is longer) + +It's also save to *not* have a `src` or `srcset` although it is not valid HTML. Once javascript is executed the `src` and `srcset` will be set by LazyLoad. If the client is a crawler like Googlebot then it will be detected by its `useragent` and the crawler sees correct HTML with `src` and `srcset` always set. +