Cannot get images taken from function to lazyload

added src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-src=” to the a href code instead and it worked.

so the above fixed the lazyloading for page1, now how do i get infinite scroll to lazyload the next page using this solution for images loaded over a function?

What’s the callback for the script? I tried calling back:

$(document).ready(function () {
        setTimeout(function () {
            $(window).trigger('lazyautoload');
        }, options.autoLoadTime);
    });

and

$(document).ready(function () {
        triggerEvent('start', $window);

        $window
            .on(options.loadEvent, initLazyElements)
            .on(options.updateEvent, queueCheckLazyElements)
            .on(options.forceEvent, forceLoadAll);

        $(document).on(options.updateEvent, queueCheckLazyElements);

        if (options.autoInit) {
            initLazyElements(); // standard initialization
        }
    });

without any luck, any ideas?

changed code to

$img_html = '<a href="' . get_permalink() . '" title="' . get_the_title() . '"><img src="' . catch_that_image() . '" alt="' . get_the_title() . '"></a>';
		 echo get_lazyloadxt_html($img_html);

still doesn’t work.

In regards to your infinite scroll question, check Settings > LazyLoadXT in your admin panel. Under the “Basics” section, make sure the last option is checked: “Enable AJAX navigation (infinite scroll, lightbox, etc).” If it is checked but still isn’t working, let me know.

In regards to the PHP code… can you past an example of what actually gets output?

I’ve checked the ajax thing in the options and it will only load black “placeholders” on page 2 onward if i use the solution to add : src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-src=” to images, first page works though.

Could it be that the plugin has issues with my test site only on the front/tag/archive pages? The lazyload works per automatic on the single pages.

The raw html output of :

get_the_post_thumbnail($post_id) != '') { 

         $img_html = '<a href="' . get_permalink() . '" title="' . get_the_title() . '"><img src="' . catch_that_image() . '" alt="' . get_the_title() . '"></a>';  ;
		 echo $img_html;

is:

<a href="https://localhost/test3" title="test3"><img src="https://localhost/imagetest3th.jpg" alt="test3"></a>

Thanks for your support!

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

that worked perfectly, still no lazyload on infinite scroll through (the option is enabled!) if i would be to manually trigger a callback for your script on each infinite trigger what would that callback look like?

the selectors (not sure if it matters but they are used to grab posts with infinite scroll)

content selector #inner_content
navigation selector .wp-pagenavi
nextpage selector a.nextpostslink
item selector .hentry

so infinite scroll works with another theme and same plugin setup so there’s definitely a theme thing why it isn’t working, i’ve dug around in your code and tried to find how the ajax stuff hooks up i can’t really understand why a theme could change the behavior unless the selectors are hardcoded somewhere in your plugin, the selectors are essentially the only thing that changes if i switch a theme, the rest is the same.

EDIT: Actually it might be because the other theme is showing content coming from within the_content loop which your plugin is coded to fetch by default, perhaps this is an issue with all themes when you’re running content through the filter the ajax loop does not apply?

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.

Well essentially it doesn’t work with other theme’s, the infinite scroll part only applies to content loaded within “post_thumbnail_html, widget_text and get_avatar” anything that is loaded extra through get_lazyloadxt_html() will not get reloaded when infinite ajax call is made.

I’m not a developer by profession so it’s hard to figure some of these things out, but what i believe would work is re-launching the part that checks get_lazyload_xt(html) with the infitite scroll callback function instead, not sure how to do it properly with your script but i think it would work.

I will dig through the html that the ajax responds with later today and see if there’s any unclosed tags like before that might be causing it

Thanks for your response!

I made it work having the infinite scroll callback the entire lazyload script

/*! Lazy Load XT v1.0.6 2014-11-19
 * https://ressio.github.io/lazy-load-xt
 * (C) 2014 RESS.io
 * Licensed under MIT */

(function ($, window, document, undefined) {
    // options
    var lazyLoadXT = 'lazyLoadXT',
        dataLazied = 'lazied',
        load_error = 'load error',
        classLazyHidden = 'lazy-hidden',
        docElement = document.documentElement || document.body,
    //  force load all images in Opera Mini and some mobile browsers without scroll event or getBoundingClientRect()
        forceLoad = (window.onscroll === undefined || !!window.operamini || !docElement.getBoundingClientRect),
        options = {
            autoInit: true, // auto initialize in $.ready
            selector: 'img[data-src]', // selector for lazyloading elements
            blankImage: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
            throttle: 99, // interval (ms) for changes check
            forceLoad: forceLoad, // force auto load all images

            loadEvent: 'pageshow', // check AJAX-loaded content in jQueryMobile
            updateEvent: 'load orientationchange resize scroll touchmove focus', // page-modified events
            forceEvent: '', // force loading of all elements

            //onstart: null,
            oninit: {removeClass: 'lazy'}, // init handler
            onshow: {addClass: classLazyHidden}, // start loading handler
            onload: {removeClass: classLazyHidden, addClass: 'lazy-loaded'}, // load success handler
            onerror: {removeClass: classLazyHidden}, // error handler
            //oncomplete: null, // complete handler

            //scrollContainer: undefined,
            checkDuplicates: true
        },
        elementOptions = {
            srcAttr: 'data-src',
            edgeX: 0,
            edgeY: 0,
            visibleOnly: true
        },
        $window = $(window),
        $isFunction = $.isFunction,
        $extend = $.extend,
        $data = $.data || function (el, name) {
            return $(el).data(name);
        },
    // $.contains is not included into DOMtastic, so implement it there
        $contains = $.contains || function (parent, el) {
            while (el = el.parentNode) {
                if (el === parent) {
                    return true;
                }
            }
            return false;
        },
        elements = [],
        topLazy = 0,
    /*
     waitingMode=0 : no setTimeout
     waitingMode=1 : setTimeout, no deferred events
     waitingMode=2 : setTimeout, deferred events
     */
        waitingMode = 0;

    $[lazyLoadXT] = $extend(options, elementOptions, $[lazyLoadXT]);

    /**
     * Return options.prop if obj.prop is undefined, otherwise return obj.prop
     * @param {*} obj
     * @param {*} prop
     * @returns *
     */
    function getOrDef(obj, prop) {
        return obj[prop] === undefined ? options[prop] : obj[prop];
    }

    /**
     * @returns {number}
     */
    function scrollTop() {
        var scroll = window.pageYOffset;
        return (scroll === undefined) ? docElement.scrollTop : scroll;
    }

    /**
     * Add new elements to lazy-load list:
     * $(elements).lazyLoadXT() or $(window).lazyLoadXT()
     *
     * @param {object} [overrides] override global options
     */
    $.fn[lazyLoadXT] = function (overrides) {
        overrides = overrides || {};

        var blankImage = getOrDef(overrides, 'blankImage'),
            checkDuplicates = getOrDef(overrides, 'checkDuplicates'),
            scrollContainer = getOrDef(overrides, 'scrollContainer'),
            elementOptionsOverrides = {},
            prop;

        // empty overrides.scrollContainer is supported by both jQuery and Zepto
        $(scrollContainer).on('scroll', queueCheckLazyElements);

        for (prop in elementOptions) {
            elementOptionsOverrides[prop] = getOrDef(overrides, prop);
        }

        return this.each(function (index, el) {
            if (el === window) {
                $(options.selector).lazyLoadXT(overrides);
            } else {
                // prevent duplicates
                if (checkDuplicates && $data(el, dataLazied)) {
                    return;
                }

                var $el = $(el).data(dataLazied, 1);

                if (blankImage && el.tagName === 'IMG' && !el.src) {
                    el.src = blankImage;
                }

                // clone elementOptionsOverrides object
                $el[lazyLoadXT] = $extend({}, elementOptionsOverrides);

                triggerEvent('init', $el);

                elements.push($el);
            }
        });
    };

    /**
     * Process function/object event handler
     * @param {string} event suffix
     * @param {jQuery} $el
     */
    function triggerEvent(event, $el) {
        var handler = options['on' + event];
        if (handler) {
            if ($isFunction(handler)) {
                handler.call($el[0]);
            } else {
                if (handler.addClass) {
                    $el.addClass(handler.addClass);
                }
                if (handler.removeClass) {
                    $el.removeClass(handler.removeClass);
                }
            }
        }

        $el.trigger('lazy' + event, [$el]);

        // queue next check as images may be resized after loading of actual file
        queueCheckLazyElements();
    }

    /**
     * Trigger onload/onerror handler
     * @param {Event} e
     */
    function triggerLoadOrError(e) {
        triggerEvent(e.type, $(this).off(load_error, triggerLoadOrError));
    }

    /**
     * Load visible elements
     * @param {bool} [force] loading of all elements
     */
    function checkLazyElements(force) {
        if (!elements.length) {
            return;
        }

        force = force || options.forceLoad;

        topLazy = Infinity;

        var viewportTop = scrollTop(),
            viewportHeight = window.innerHeight || docElement.clientHeight,
            viewportWidth = window.innerWidth || docElement.clientWidth,
            i,
            length;

        for (i = 0, length = elements.length; i < length; i++) {
            var $el = elements[i],
                el = $el[0],
                objData = $el[lazyLoadXT],
                removeNode = false,
                visible = force,
                topEdge;

            // remove items that are not in DOM
            if (!$contains(docElement, el)) {
                removeNode = true;
            } else if (force || !objData.visibleOnly || el.offsetWidth || el.offsetHeight) {

                if (!visible) {
                    var elPos = el.getBoundingClientRect(),
                        edgeX = objData.edgeX,
                        edgeY = objData.edgeY;

                    topEdge = (elPos.top + viewportTop - edgeY) - viewportHeight;

                    visible = (topEdge <= viewportTop && elPos.bottom > -edgeY &&
                        elPos.left <= viewportWidth + edgeX && elPos.right > -edgeX);
                }

                if (visible) {
                    triggerEvent('show', $el);

                    var srcAttr = objData.srcAttr,
                        src = $isFunction(srcAttr) ? srcAttr($el) : el.getAttribute(srcAttr);
                    if (src) {
                        $el.on(load_error, triggerLoadOrError);
                        el.src = src;
                    }

                    removeNode = true;
                } else {
                    if (topEdge < topLazy) {
                        topLazy = topEdge;
                    }
                }
            }

            if (removeNode) {
                elements.splice(i--, 1);
                length--;
            }
        }

        if (!length) {
            triggerEvent('complete', $(docElement));
        }
    }

    /**
     * Run check of lazy elements after timeout
     */
    function timeoutLazyElements() {
        if (waitingMode > 1) {
            waitingMode = 1;
            checkLazyElements();
            setTimeout(timeoutLazyElements, options.throttle);
        } else {
            waitingMode = 0;
        }
    }

    /**
     * Queue check of lazy elements because of event e
     * @param {Event} [e]
     */
    function queueCheckLazyElements(e) {
        if (!elements.length) {
            return;
        }

        // fast check for scroll event without new visible elements
        if (e && e.type === 'scroll' && e.currentTarget === window) {
            if (topLazy >= scrollTop()) {
                return;
            }
        }

        if (!waitingMode) {
            setTimeout(timeoutLazyElements, 0);
        }
        waitingMode = 2;
    }

    /**
     * Initialize list of hidden elements
     */
    function initLazyElements() {
        $window.lazyLoadXT();
    }

    /**
     * Loading of all elements
     */
    function forceLoadAll() {
        checkLazyElements(true);
    }

    /**
     * Initialization
     */
    $(document).ready(function () {
        triggerEvent('start', $window);

        $window
            .on(options.loadEvent, initLazyElements)
            .on(options.updateEvent, queueCheckLazyElements)
            .on(options.forceEvent, forceLoadAll);

        $(document).on(options.updateEvent, queueCheckLazyElements);

        if (options.autoInit) {
            initLazyElements(); // standard initialization
        }
    });

})(window.jQuery || window.Zepto || window.$, window, document);

Question is, having that entire thing load on each page not sure how efficient that is, is there a shorter code that might work instead of loading everything over and over on infinite scroll or is this the proper way of doing it?

Thanks for the support!

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.)