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

Overview

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 file and place the following code before the </body>:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.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/jquery.lazy.min.js"></script>

Note: In the src section, you must enter the path of the jQuery Lazy 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 type="text/javascript"> $(function() {$('img').Lazy();}); </script>

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

<script type="text/javascript"> $(function() {$('.lazy').Lazy();}); </script>

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

Add jQuery library on the site

Refer to the site template function.php file and put the following code at the end of the function.php file.

If you can access the file via CDN, use the following command.

// Sample Two. Load the file on CDN Google
function peymanseo_load_assets(){
  wp_register_script( 'JqueryNew.peymanseo' , 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', array(), null, false);
  wp_enqueue_script( 'JqueryNew.peymanseo' );
}
add_action('wp_enqueue_scripts', 'peymanseo_load_assets');

If you want to call the file from your site, use the following command.

// Sample One. Load the file on your site
function peymanseo_load_assets(){
  wp_register_script( 'JqueryNew.peymanseo' , 'https://domain.com/wp-content/themes/{name-theme}/assets/js/jquery.js', array(), null, false);
  wp_enqueue_script( 'JqueryNew.peymanseo' );
}
add_action('wp_enqueue_scripts', 'peymanseo_load_assets');

Note: In the URL field, you must enter the path of the jQuery Lazy library file on your site.

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 below, we enabled lazy jQuery library and replaced data-src with src for images in WordPress. Now, using these codes, the lazy library creates a base64 link for images in the src attribute, and when the user approaches the new image, the base64 image link changes to the original image link, and the data_src attribute is removed. Now the image upload request is sent and the image is uploaded.

For more information, refer to the comments in the Activating jQuery Lazy in WordPress.php.

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.

Laravel & Solana Phantom wallet example built with Bootstrap, JQuery. App connects to Phantom wallet and fetching publicKey and balance information.

Phantom Wallet Authentication Example Laravel & Solana ($SOL) Phantom wallet example built with Bootstrap, JQuery. This is a Web 3.0 app that connects

JavaScript to JQuery Converter

JQuery To Javascript Converter for helping to removing JQuery on websites.

File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery

File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

Laravel & MySQL, jQuery, Ajax, Bootstrap. Also, it's include email send function without any API.
Laravel & MySQL, jQuery, Ajax, Bootstrap. Also, it's include email send function without any API.

Rewards-Dacor Laravel & MySQL, jQuery, Ajax, Bootstrap. Also, it's include email send function without any API. [Live site link] ( https://rewardsdaco

⚙️ 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

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

Install WordPress LazyLoader with LOZAD Guide to setting up a lazy loader with the Lozad library in WordPress. Installation Step 1: Refer to the foote

Peyman Naderi 7 Aug 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