In ajax loaded content Image Lazyloader not working.

I had the problem with a view. I solved it with this (I know, not the most elegant solution, but sometimes reality is craving for a fast solution).

In a module

function [MODULE_NAME]_views_ajax_data_alter(&$commands, $view) {
  // This solves the problem of images not being loaded in Views with AJAX pager.
  if ($view->name == [VIEW_NAME]) {
    $commands[] = ajax_command_invoke([SOME_SELECTOR], 'forceLoad', array('img[data-src]'));
  }
}

I had a selector in front of 'img[data-src]' in order to only hit the relevant images.

In a JS file:

(function ($) {
  $.fn.forceLoad = function(selector){
    $(selector).each(function(){
      $(this).attr('src', $(this).attr('data-src')).removeAttr('data-src');
    });
  };
})(jQuery);

I will try to create something more general.

I'm trying to use this module for views too and it doesn't seem to do anything. I don't use Ajax with views so that's not the issue.

edit. I ended up using http://drupal.org/project/lazyload instead.

As I understand, the new pictures loaded through Ajax do not receive the lazyloader function.

That's what Drupal.behaviors are for. Please try with this lazyloader.module, lazyloader_process_html() function :

    $lazyloader_init = '
      <noscript><style type="text/css" media="all">img[data-src] { display: none; }</style></noscript>
      <script type="text/javascript">
				(function ($) {
					Drupal.behaviors.lazyloader = {
						attach: function (context, settings) {
							$("img[data-src]").lazyloader({distance: ' . trim($settings['distance']) . ', icon: "' . $icon . '" });
						}
					};
				}(jQuery));
      </script>';

It works for me at least...

Same problem for me using Views with ajax.
Thanks for your fix, I attached it as a patch.

reroll of patch against dev. This is working in a production site I just tested it in so I think it's ready for prime time. Setting it to R&T though obviously not the maintainer, just helping highlight that this works w/ multiple confirmations. Great module!

refactoring of patch to resolve
#2088367: wrapping inline jquery call for js at end of file themes
and
#2077337: Notice icon undefined

I've also rebuilt the page to follow better conventions for including inline js in drupal by allowing the drupal_add_js function to handle it. This helps avoid conflicts realized in #2088367: wrapping inline jquery call for js at end of file themes

attaching the patch would have helped :)

Great patch (#7). Working well for me so far to resolve conflict with views infinite pager.

This patch is perfect.

Can't patch... I'm using patch in #7 and version 7.x.1-1 dev

patching file lazyloader.module
patch unexpectedly ends in middle of line
Hunk #1 succeeded at 154 with fuzz 2.

Patch must be revised. It's fuzzy.

anybody who wants to maintain this module?

sure; dono how much I'll add but #7 works well in production where I have it. would be happy to apply to the project.

@btopro, did you take maintenance? would be nice to have the patch applied to dev

Patch #7 doesn't work with Views slideshow when the slideshow is above the fold on page load. Hence this patch.

Patch in #14 works fine for me.

EDIT: Patch #14 has problems when a view is filtered by exposed filters with ajax. Patch #7 works nicely

#7 works great! Tjak You, btopro!

But now I have en error:
Notice: Undefined index: icon in lazyloader_page_build() (line 180 in /home/...blah-blah.../lazyloader/lazyloader.module).

My end code:

/**
 * Implements hook_process_html().
 *
 * Initialize the trigger for lazyloader
 *
 */
function lazyloader_page_build(&$vars) {

  global $_lazyloader_set;

  $settings = $_lazyloader_set;

  if ($settings['enabled'] && !drupal_match_path($_GET['q'], $settings['exclude'])) {

    $icon = ($settings['loader_icon'] != 0) ? LAZYLOADER_PATH . '/loader/loader-' . $settings['loader_icon'] . '.gif': '';

    $lazyloader_init = '
     (function ($) {
      Drupal.behaviors.lazyloader = {
        attach: function (context, settings) {
          $("img[data-src]").lazyloader({distance: ' . trim($settings['distance']) . ', icon: "' . base_path() . $settings['icon'] . '" });
        }
      };
    }(jQuery));';
    $options = array('type' => 'inline');
    drupal_add_js($lazyloader_init, $options);
    // add noscript markup as a fallback
    $noscript = '<noscript><style type="text/css" media="all">img[data-src] { display: none; }</style></noscript>';
    $vars['page_bottom']['lazyload'] = array('#markup' => $noscript);
  }
}

ok.. it's simple, replace:

, icon: "' . base_path() . $settings['icon'] . '" });

for

, icon: "' . $icon . '" });

angelo047, great thank You for help - it works fine!

Worked for me would love to see #14 committed.

Seems like there are currently mixed reports about which is better, 7 or 14

Major difference in approaches is that 7 runs during page build operation while 14 runs during HTML output operation. 7 is more flexible and can be overridden by other projects and *should* have greater compatibility with things like panels / EVA / anything that loads items into items (potentially).

We run 7 in production w/ the latest dev

I will give #7 another go on the site I am developing to see what I think.

Thanks for the tip.

make sure you clear site caches after applying #7 cause it switches hooks involved in page building / output which then can break the JS getting tied into the page (until caches are cleared).

Well one thing that I like so far is a few issues I had before I excluded panels do not appear with patch 7. Continuing to play and seeing what I can find.

Thanks again.

Overall, it seems #7 works better for my situation. I am using this primarily for Views Load More module which uses waypoints.js to load more content. Having it run during page build operation seems smoother than HTML output operation.

Thanks a lot for the patches btopro. Good stuff

I've altered #7 to attach the javascript using #attached instead of drupal_add_js() to allow for better caching. Please review it's functionality so I can commit this.

Patch committed, thanks!

lazyload.module
the function:

…………
function _lazy_loader_enabled() {
if(isajax()){return false;}
…………

function isajax(){
    //var_dump('isajax');
    if(arg(0) == 'media' && arg(1) == 'browser'){
        return true;
    }
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        /* special ajax here */
        return true;
    }
    return false;

}

@lamp99 ????

Hello! May be some one can help me -
I wrote my custom module with ajax content loading, like this -

js file:

 $("<div>").load("/get/ajax/node/" + nextPoint, function () {
                        $("#block-system-main").append($(this).html());
}

module:

function ajax_node_feed_ajax_get_ajax($nid) {
  // The function will receive the array of arguments after the "get/ajax" prefix
  $path = implode('/', func_get_args());
  $render_string = menu_execute_active_handler($path, FALSE);
  return $render_string;
}

And after loading content, lazy load not working, just white space. HTML code of img tag:

<figure class="clearfix field-item even"><img class="image-style-700x400" data-src="http://ptzfeed.ru/sites/default/files/styles/700x400/public/original_nodes/img_0377.jpg?itok=lB45tGlB" src="http://ptzfeed.ru/sites/all/modules/lazyloader/image_placeholder.gif" width="700" height="400" alt="">
<noscript>&amp;lt;img class="image-style-700x400" src="http://ptzfeed.ru/sites/default/files/styles/700x400/public/original_nodes/img_0377.jpg?itok=lB45tGlB" width="700" height="400" alt="" /&amp;gt;</noscript>
</figure>

What I must to do? Sorry for my English :)

Adding Drupal.attachBehaviors(); helped me :)

Hi,

I cant find lazyloader_process_html() in lazyloader.module.

I have my page coming through angularjs, means its a ajax content and I want to applly lazyloader to it. html code is getting generated but lazy loader is not getting applied. Following is the html generated

<div class="image-container">
                                    <img typeof="foaf:Image" data-icon="/sites/all/modules/contrib/lazyloader/loader/loader-6.gif" src="/sites/default/files/images/recipes/khaudiary_recipe_1464871354.jpg" alt="">                           
                                    
                                </div>

Someone help me to fix this

Hi nayanalok,

Please open a new issue instead of re-opening this closed issue.