Adding a Class to Images, Videos, and Iframes

Native lazy loading is great for site performance because it doesn’t rely on inline Javascript code or external scripts.

Sometimes optimization plugins disable native lazy loading so they can take care of the optimization of videos, images, and Iframes using scripts and Javascript libraries.

When you disable those optimization plugins, you will notice that the class that indicates to the browser that they should lazy load a resource is missing.

If you can figure out what the problem is, you will have to add the class to all your images, videos, and Iframes.

Adding a class to these types of resources manually will take lots of time.

Since I am not a coder, I turned into an AI tool so it could generate code snippets that add the class attribute to all my images, videos, and Iframes.


How to Add a Class to Images, Videos, and Iframes

I add code like the ones provided here using code snippet plugins such as:

This code checks if the loading="lazy" attribute has already been added to the element before adding it again.

function add_lazy_loading_to_images_iframes_and_videos($content) {
  // Check if the content contains any img, iframe, or video elements
  if (preg_match_all('/<(img|iframe|video)\b[^>]*>/i', $content, $matches)) {
    foreach ($matches[0] as $match) {
      // Check if the element already has the loading="lazy" attribute
      if (!preg_match('/\sloading="lazy"/i', $match)) {
        // Add the loading="lazy" attribute to the element
        $lazy_loading_element = preg_replace('/<(img|iframe|video)\b/i', '<$1 loading="lazy"', $match);
        $content = str_replace($match, $lazy_loading_element, $content);
      }
    }
  }

  return $content;
}
add_filter('the_content', 'add_lazy_loading_to_images_iframes_and_videos');

This function uses the preg_match() function to check if the loading="lazy" attribute has already been added to the element. If it has not been added, the attribute is added using the preg_replace() function.

The loading="lazy" attribute added by the previous code is not permanent and will only be applied to the element when the page is loaded or refreshed.

When the page is loaded or refreshed, the function will search for img, iframe, and video elements in the content and add the loading="lazy" attribute to each element that does not already have it.

The code doesn’t make permanent changes to your site elements.

Results

I have used the code in several websites and now my site images, videos, and Iframes are being lazy loaded.

My sites haven’t experienced any issues.

Having said that, I recommend making a copy of your site using All-in-One WP Migration, restoring the copy in a local environment, and testing the code.

Once you know for certain that the code works, you can add it to the functions.php file using a code snippet plugin, a child theme, or a custom plugin.

More Code Snippets for WordPress

You might want to check some of these posts before you leave:

Manuel Campos, English Professor

Manuel Campos

I am José Manuel. I am writing about things I know and things that I am learning about WordPress. I hope you find the content of this blog useful.

WP SURFER

home

about

privacy

contact

© 2024 WP SURFER • Made with Love in Costa Rica