dbhynds

Thanks for alerting me. I’ll get a fix implemented ASAP.

Good catch! Thanks for noticing this. I’ll get an update out soon.

It looks like an issue with the Kadence theme. I checked out their demo site and the theme there had similar code. The images in that carousel don’t self-close, and they need to in order for the plugin to detect them. If you’re comfortable editing your theme files, you can make that change yourself. If not, I’d recommend contacting the theme authors and requesting that update the theme to fix this.

Refer them to this thread, and let them know to reach out to me if they have any questions.

I’m going to mark this as resolved for now. Feel free to reopen it if anything new comes up on this issue.

This may be difficult to answer, as the problem could be with your theme or with one of your plugins. How do you add images to that section in wp-admin? Are you using a shortcode? Or does it use custom fields? What theme are you using?

I located the problem. On the mobile site, your image tags don’t self-close.

You have:

<img width="268" height="268" src="https://m.cardmart.in/wp-content/uploads/2015/11/Cardmart-116-Inside-268x268.jpg" class="attachment-shop_catalog wp-post-image" alt="Cardmart-090">

You need:

<img width="268" height="268" src="https://m.cardmart.in/wp-content/uploads/2015/11/Cardmart-116-Inside-268x268.jpg" class="attachment-shop_catalog wp-post-image" alt="Cardmart-090" />

Add the “/” at the end, and it should work.

Ah… interesting way to fix the problem! It may not be the most elegant solution, but I applaud your creativity!

Thanks for the positive feedback! I’m glad you found my plugin useful.

So adding it via jQuery then excluding it won’t work, because the excluding action happens via PHP (so by the time it gets to the browser for jQuery to interact with it, it’s already been modified to be lazy loaded). It only checks classes on the image tag, itself, not a tree of classes.

There isn’t a way to do it currently with this version of the plugin. (Maybe someday in the future). However, you may be able to accomplish this by extending the configuration as outlined here: https://github.com/ressio/lazy-load-xt/#options.

Try adding the following to your site’s main .js:

$.extend($.lazyLoadXT, {
  updateEvent: 'slider_next slider_prev'
});

Note: ‘slider_next slider_prev’ aren’t the correct values. You’ll need to set those to the events that trigger the slider changing. Currently, the lazyload update action only fires on ‘load orientationchange resize scroll’. So just navigating the slider doesn’t trigger the lazy load action (until you scroll or resize the screen, for example. Try it out and see). You’ll need to extend the updateEvent option to include the actions that trigger the slider to change.

Good luck! I hope that’s helpful.

Good questions.

Re: 15 images in side .gallery … The best way to accomplish this is to give the images in the gallery have their own unique class (such as .gallery-image). Then, navigate in the admin to “Settings > Lazy Load XT” and add it to the text box labelled “Skip lazy loading on these classes”. (Note: Don’t include the period before the classes in this text box; you would just enter “gallery-image”.)

Re: Background images … So what exactly is the problem you are experiencing? Is the background image lazy loading when it isn’t supposed to be? Or is it trying to lazy-load and failing?

If the option is unchecked, then it shouldn’t be trying to lazy-load it at all. Furthermore, even if the option is checked, your normal css should function as expected unless you add data-bg="/path/to/image.jpg" to the element you want to lazy-load a background for. Otherwise, it should be messing with your styling.

Thanks for using my plugin! Let me know if that helps.

These collapsable divs are set to ‘display:none;’ I’m guessing?

.lazyLoadXT() fires on scroll, but it probably doesn’t recognize that an iframe is in view when the collapse toggle event is triggered. You’ll need to fire it off when the toggle is clicked.

I’m not positive, but I suspect that something like this will work.

$('.collapse').click(function(){
  $('.mapholder'). lazyLoadXT();
})

Give it a shot and see if that does the trick. You’ll need to swap out the $(‘.collapse’) for whatever element is triggering the show/hide.

You can do this:

$('.feature-block-item').lazyLoadXT();

However, you need to filter the html for that element through the plugin’s regex before echoing. You can do this by passing it through the get_lazyloadxt_html() function and echoing the response.

See these for more info:
https://github.com/ressio/lazy-load-xt#advanced-initialization
https://www.ads-software.com/plugins/lazy-load-xt/faq/

I’m updating the plugin in the next week or two to handle responsive images. Look for an update. Also, WP4.4 supports srcset for responsive images, which is great news!

Update the plugin when it gets released, and let me know how it works for you.

Glad you got it working! Were you able to get the AJAX response? (If you’re using chrome, you should be able to see and find it in the Network tab of the Console … On Windows and Linux: Ctrl + Shift + J. On Mac: Cmd + Option + J.)

There’s an issue open currently on GitHub related to this problem. I’m following any developments, and will keep y’all posted when this gets resolved. https://github.com/ressio/lazy-load-xt/issues/59

Glad that first solution worked for you.

It sounds like the infinite scroll is still a mystery, but it works on the other theme… My initial thoughts:

Out of the box, this plugin will only lazy load images that appear as part of the_content, post_thumbnail_html, widget_text and get_avatar. My first guess is that the AJAX call is returning markup with images generated in some other fashion. Dig into the response generated by the AJAX call, and see if that’s it. Or, if you can pass the AJAX response through get_lazyloadxt_html() function before it back to the browser, that should fix it.

The other likely scenario is that my plugin’s regex isn’t finding any matches during the AJAX call. If you can post some sample HTML that the AJAX call responds with, I can see if there’s a regex matching issue.

Ahah! I found the problem. The <img> tag needs to be self closing, or else the regex won’t match it. So change:
$img_html = '<a href="' . get_permalink() . '" title="' . get_the_title() . '"><img src="' . catch_that_image() . '" alt="' . get_the_title() . '"></a>';
To:
$img_html = '<a href="' . get_permalink() . '" title="' . get_the_title() . '"><img src="' . catch_that_image() . '" alt="' . get_the_title() . '" /></a>';

It should work after that. Let me know how it goes