Convert src attribute to src-data for img tags on post category pages

Hello,

I'm trying to implement lazy loading function to our development site. I'm using Lazy Loader XT plugin for this. However, i need to change the "src" attribute of the <img> tag to "src-data", here on an example page, that shows all the posts in a category:

http://139.59.129.50/category/egitim-haberleri/

I have tried parsing html, using "the_content" and "post_thumbnail_html" filters, that didn't work.

Also, I have tried our theme's (boss theme) custom javascript function, adding a jquery that changes the src attribute to src-data. While that changed the attribute, the plugin did not work correctly.

To be more specific, the plugin "seemed" to work, but when I took a look at the source code, I saw that instead of loading a placeholder and download the image when the browser can see it, the plugin downloaded every image while loading the page.

Could you please help me how to do this right. It will make a very big performance impact on our site. Thanks.

I have tried parsing HTML with "the_content" filter

  • Nithin

    Hi Alp,

    Hope you are doing good today. :slight_smile:

    However, i need to change the "src" attribute of the <img> tag to "src-data", here on an example page, that shows all the posts in a category:

    I suppose you meant data-src, as there isn't any attribute called src-data.

    I tested the Lazy Load XT plugin in my system, and it seems to work fine in category pages in a default WordPress theme. So this seems to be a theme specific issue. The current plugin works only by adding src attributes with data-src in the <img> tags. Or are you looking to replace src with data-src?, as there isn't any difference in doing that:
    http://stackoverflow.com/questions/15320052/what-are-all-the-differences-between-src-and-data-src-attributes

    Also, I have tried our theme's (boss theme) custom javascript function, adding a jquery that changes the src attribute to src-data. While that changed the attribute, the plugin did not work correctly.

    Could you please share your code, so that we could see whether there is any issue with your custom script.

    Would recommend you to check whether there are any other plugins which works out of the box with your theme:
    https://wordpress.org/plugins/search.php?q=lazy+load

    Please advise if I'm missing out anything, have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Alp

    Hi Nithin,

    Thanks for the detailed feedback and support.

    I suppose you meant data-src, as there isn't any attribute called src-data.

    Sure, yes I have mixed that up. It was quite late when I sent you the support ticket. :slight_smile:

    I tested the Lazy Load XT plugin in my system, and it seems to work fine in category pages in a default WordPress theme. So this seems to be a theme specific issue. The current plugin works only by adding src attributes with data-src in the <img> tags. Or are you looking to replace src with data-src?

    Yes, as you have figured, it adds the data-src attribute and sets it the same as src attribute. Then, when loading the page, it swaps the src attribute with a 1 pixel png image, and when the browser can view the image, it then downloads the actual image.

    As you have pointed out, this definitely looks theme specific. Avatars work fine, no problem. I'll share with you my code in a minute, I did not install the WPMUDEV panel on the dev server because it sometimes slows the backend considerably, so if you like, I can also send you a guest admin account over PM.

    Here is the jquery code for adding data-src, but this does not work the way it supposed to be:

    jQuery('.entry-post-thumbnail').children('img').each(function() {
    
        $(this).attr("data-src",$(this).attr("src"));
        $(this).removeAttr("src");
    });

    This is defined in the boss theme's custom codes section. I think this code fires after Lazy Load XT's js files, so although it changes the attribute, the plugin can't do its job.

    I also inserted a custom function in the theme's functions.php to prepare the attribute for lazy loading, but that completely did not work. Maybe I used the wrong filter. Could you take a look at it:

    function addLazyLoading($html) {
      $dom = new DOMDocument();
      if (!@$dom->loadHTML('<?xml encoding="UTF-8">' . $html)) // trick to set charset
        return $html;
      foreach ($dom->childNodes as $item)
        if ($item->nodeType === XML_PI_NODE) {
          $dom->removeChild($item);
          break;
        }
      $dom->encoding = 'UTF-8';
      $images = $dom->getElementsByTagName('img');
      $blankImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
      for ($i = $images->length - 1; $i >= 0; $i--) {
        $node     = $images->item($i);
        $clone    = $node->cloneNode();
        $noscript = $dom->createElement('noscript');
        $noscript->appendChild($clone);
        $node->parentNode->insertBefore($noscript, $node);
        $node->setAttribute('data-src', $node->getAttribute('src'));
        $node->setAttribute('src',      $blankImage);
        $node->setAttribute('class',    trim($node->getAttribute('class') . ' lazy'));
      }
      $newHtml = $dom->saveHTML();
      if (!$newHtml)
        return $html;
      return $newHtml;
    }
    
    add_filter('the_content', 'add_lazyload');
    add_filter( 'post_thumbnail_html', 'add_image_placeholders', 11 );

    Thanks for your support!

    Alp

  • Rupok

    Hi Alp,

    this definitely looks theme specific

    Thanks for confirming. In that case, can you please ping the theme developer and the developer of Lazy Loader XT plugin? They can give you best idea regarding this as they know that theme and plugin architecture best.

    I've also pinged one of our SLS (Second Level Support) Team member to have a look at this. If this is something we can fix in our 10 minutes window, we will surely work on it and will try to fix this for you. You can get idea about our policy regarding Support Vs. Custom Development here: https://premium.wpmudev.org/manuals/using-wpmu-dev/support-vs-custom-development/

    Please let us know what you get from theme and plugin developer. That will surely help us to get this issue resolved.

    Have a nice day. Cheers!
    Rupok

  • Panos

    Hi Alp ,

    I can't replicate this issue so I can't test your code on my installation.

    I had a look at the code of the plugin and noticed that it provides a helper function which you can try:

    function add_lazyload_test( $content ){
    return get_lazyloadxt_html($content);
    }
    
    add_filter('the_content', 'add_lazyload_test', 10);

    If you notice it doesn't work please try using higher priority in the filter hook, by changing 10 to 100.

    Thanks!
    Panos