diff --git a/README.md b/README.md index 6a1d2c6..6ee72b0 100644 --- a/README.md +++ b/README.md @@ -203,6 +203,16 @@ const coolImage = document.querySelector('.image-to-load-first') observer.triggerLoad(coolImage); ``` +### Large image improvment + +Sometimes image loading takes a long time. For this case, you can add a placeholder background: + +```html + +``` + +Lozad sets a placeholder background color of img element and users will see the fallback till the image loads. + ## Example with picture tag Create _a broken_ picture element structure. diff --git a/demo/assets/css/main.css b/demo/assets/css/main.css index e07a762..3d1d082 100644 --- a/demo/assets/css/main.css +++ b/demo/assets/css/main.css @@ -47,6 +47,7 @@ body { img { width: 100%; + height: 100%; } /* Box Model */ diff --git a/demo/index.html b/demo/index.html index cdf4d61..c544b4e 100644 --- a/demo/index.html +++ b/demo/index.html @@ -58,62 +58,62 @@