Guide to setting up a lazy loader with the Lozad library in WordPress.

Overview

Install WordPress LazyLoader with LOZAD

Guide to setting up a lazy loader with the Lozad library in WordPress.

Installation

Step 1: Refer to the footer.php file and place the following code before the </body>:

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

If you have placed the files on your site, call it like this:

<script type="text/javascript" src="https://domain.com/wp-content/themes/{name-theme}/assets/js/lozad.min.js"></script>

Note: In the src section, you must enter the path of the LOZAD library file on your site.

Step 2: Now, after the call library, put exactly one of the following codes.

Sample One. Function call for All images.

<script>
  const el = document.querySelectorAll('img');
  const observer = lozad(el);
  observer.observe();
</script>

Sample Two. Function call for specific images with class .lazy

<script>
  const observer = lozad('.lazy-class');
  observer.observe();
</script>

The library is installed on the site, now you need to prepare the site for the library.

Replace DATA-SRC with SRC

Again, put the following code at the end of the function.php file to replace SRC with DATA-SRC.

function peymanseo_data_src_replace( $html_peymanseo ) {
  if ( ! is_admin() ) {
      $html_peymanseo = preg_replace( '/<img(.*?)src=/is', '<img$1data-src=', $html_peymanseo );
  }
  return $html_peymanseo;
}
function peymanseo_data_src_replace_start() {
  ob_start( 'peymanseo_data_src_replace');
}
add_filter( 'wp_head', 'peymanseo_data_src_replace_start');

The work is done.

Description

Using the code above, we activated the Lozad library and replaced data-src with src for images in WordPress. Now, using these codes, the image link is placed in the DATA_SRC attribute, when you approach the image, the image link is placed in the SRC attribute. Now the image upload request is sent and the image is uploaded.

See the comments for "Installing WordPress lazy loader with Lozad.php" for more information.

You might also like...
A plain-language, step-by-step guide for the computer novice to build their own cloud.
A plain-language, step-by-step guide for the computer novice to build their own cloud.

This is a plain-language, step-by-step guide for the computer novice wanting to build their own cloud, looking to declare independence from Google and its ilk, to save on monthly hosting fees, or just learn a new skill.

⚙️ A WordPress plugin to set WordPress options from a .env file.

dotenv A WordPress plugin to set WordPress options from a .env file. Any WPENV_ prefixed variables in the .env will be used to override the WordPress

WordPlate is a wrapper around WordPress. It makes developers life easier. It is just like building any other WordPress website with themes and plugins. Just with sprinkles on top.
WordPlate is a wrapper around WordPress. It makes developers life easier. It is just like building any other WordPress website with themes and plugins. Just with sprinkles on top.

WordPlate is simply a wrapper around WordPress. It makes developers life easier. It is just like building any other WordPress website with themes and plugins. Just with sprinkles on top.

Thirdweb-wp - A community WordPress plugin for thirdweb. Turn your WordPress website into Web3 instantly and easily with thirdweb. 💻🌏

Thirdweb WP 📢 Nominate (@WarenGonzaga) as GitHub Star. If you appreciate his hardwork and dedication to open source. A community WordPress plugin for

Api.video-wordpress-plugin - The official api.video plugin for WordPress
Api.video-wordpress-plugin - The official api.video plugin for WordPress

api.video WordPress Plugin api.video is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managin

A simple GitScrum plugin for Wordpress. You will be able to manage your projects without having to leave Wordpress.
A simple GitScrum plugin for Wordpress. You will be able to manage your projects without having to leave Wordpress.

GitScrum Plugin for Wordpress A simple GitScrum plugin for Wordpress. You will be able to manage your projects without having to leave Wordpress. GitS

A library that improve your WordPress development experience. 🚀

UYCore WordPress The main idea of the UYCore WordPress library is to decrease development time and have enjoyed the development process. The UYCore li

Owner
Peyman Naderi
Junior Developer WordPress & SEO Expert
Peyman Naderi
Guide to setting up a lazy loader with the jQuery Lazy library in WordPress.

Run jQuery Lazy in Wordpress Guide to setting up a lazy loader with the jQuery Lazy library in WordPress. Installation Step 1: Refer to the footer.php

Peyman Naderi 5 Nov 28, 2022
YCOM Impersonate. Login as selected YCOM user 🧙‍♂️in frontend.

YCOM Impersonate Login as selected YCOM user in frontend. Features: Backend users with admin rights or YCOM[] rights, can be automatically logged in v

Friends Of REDAXO 17 Sep 12, 2022
Wp-to-txp - @WordPress to @Textpattern dev guide

WordPress to Textpattern dev guide Helping poor WP devs to find their track… Contents Themes development Plugins development Related Awesome Textpatte

Nicolas Morand 2 Jan 10, 2020
Samsui is a factory library for building PHP objects useful for setting up test data in your applications.

#Samsui Samsui is a factory library for building PHP objects useful for setting up test data in your applications. It is mainly inspired by Rosie for

Sam Yong 31 Nov 11, 2020
phalcon config loader for yaml

Phalcon Config Loarder for Yaml Loads all the yml in the directory of the app/config. Version PHP: 7.0.x, 7.1.x, 7.2.x Phalcon: 3.x Composer { "r

Toshiyuki Ienaga 2 Oct 7, 2022
Simple loader to send request and read response from address.

Simple loader to send request and read response from address. Uses cURL extension. Composer package.

null 2 May 17, 2022
Versi dinamis dari spk fuzzy sebelumnya, kini support setting jumlah sub kriteria

spk-fuzzy-dynamic Versi dinamis dari spk fuzzy sebelumnya, kini support setting jumlah sub kriteria SPK-Pariwisata-Fuzzy Implementasi Fuzzy Tahani Pad

Huda Mustakim 3 Mar 22, 2022
A text-based, persistent browser-based strategy game (PBBG) in a fantasy war setting

Note: OpenDominion is still in development. Some features of the game have not been implemented yet. Introduction OpenDominion is a free and open-sour

null 180 Dec 28, 2022
Clean Code concepts adapted for PHP - A guide for producing readable, reusable, and refactorable PHP software

Clean Code concepts adapted for PHP - A guide for producing readable, reusable, and refactorable PHP software

Fabio Soares 172 Dec 25, 2022