Codeigniter Web Optimization Tips [part 3]: Lazy Loading Images
Previous Series
Tutorial: Codeigniter Web Optimization 3 [Part 2]
Website Optimization with Code Minification [Part 1]
Other articles about PHP & Codeigniter
Today's Search Engines are very demanding that our site must be quickly accessed. And one of the slowest causes of loading is Image. Now the method that is now commonly used by everyone is by Lazy Load images aka Images made asyncronously Loaded after all the other Elements Load all.
Keep in mind, the most important thing is that the picture before we install it on the website must be used first after the need. Suppose we set the size, we compress or reduce the size of the image with available tools such as JpegMini or other tools.
Of all Lazy Load libraries that I have tried, I finally use the library Lazyizes. How to use it quite easily,
Install the library on the site
<body>
...
...
...
<script src = "lazysizes.min.js" async = ""> </ script>
</ body>
Set Attribute class = "lazyload" and data-src = "my_image.jpg" for all the Images that we want
<img data-src = "my_image.jpg" class = "lazyload">
Enough with the above steps without any additional configuration, our image is now Lazy Load and that is what I use on this Blog. If you want an additional configuration, please read in the Repo.
For example in the Demo source code
<div class = "mdl-cell mdl-cell - 8-col mdl-cell - 12-col-mdl-cell tablet - 12-col-phone mdl-grid mobile-cell-container">
<div class = "mdl-shadow - 2dp mdl-color - white mdl-cell mdl-cell - 12-col art-container-pink">
<h2 class = "h2-header"> <a href="#" class="link-header"> Latest </a> </ h2>
<ul class = "mdl-list">
<? php if (isset ($ latest)) {foreach ($ latest as $ lt) {?>
<li class = "mdl-list__item mdl-list__item - two-line">
<a class="card-link" href="<?php echo site_url('read/'. $lt['slug']);?> ">
<span class = "mdl-list__item-primary-content">
<! - Add `lazyload` to the class & data-src =" "->
<img class = "mdl-list__item-avatar avatar list-avatar-article lazyload" data-src = "<? php echo $ lt ['img_thumbnail'];?>" alt = "<? php echo $ lt ['title ']?> ">
<span> <h2 class = "tile-title"> <? php echo $ lt ['title']?> </ h2> </ span>
<span class = "mdl-list__item-sub-title list-sub-title">
by <? php echo $ lt ['created_by']?> | <? php echo date ('M, d H: i', strtotime ($ lt ['created_at']));?> | <? php echo $ lt ['pageview']; ?> views
</ span>
</ span>
</a>
</ li>
<? php}}?>
</ ul>
<div class = "pagination-container">
<? php echo $ paging; ?>
</ div>
</ div>
</ div>
<! - Right side ->
<div class = "mdl-cell mdl-cell - 4-col mdl-cell - 12-col-mdl-cell tablet - 12-col-phone mobile-cell-container">
<? php $ this-> view ('frontend / widget / right'); ?>
<? php $ this-> view ('frontend / widget / right2'); ?>
</ div>
And it will lazy load the image on the following page
Please download the complete source ci_amp. If you have questions please comment.
For the Live Demo, please check this Blog because you have used the same Lazy Load method. for example, the Author or Category page
0 Comments