How to Ajaxify a Drupal 7 Views block

Question

I have a custom content type, with an associated block, which all displays correctly. The block is initially hidden, upon clicking a button the block is moved into view, and the user is able to scroll horizontally through each content item.

Each content item contains an image, so I am interested in preventing them from being loaded initially, and only when the button is clicked (in order to reduce initial loading time).

I don't suppose there is a Drupal way of doing this? The only way I can think of is making direct calls to the database, which I don't want to do for obvious reasons.

I noticed a "Use Ajax" option in the Views interface, however I wouldn't have thought this would work with my custom jQuery code?

Answer 1

You might try the Lazy Image Loader. I'm not sure if it will work for your case, but it's worth a shot. You can also implement the lazy behavior yourself. Use javascript to test the "complete" property of each image, and change the src attribute on any image that currently hidden from view. When it becomes visible, swap in the original src. I've seen good results with this script: http://www.appelsiini.net/projects/lazyload.

Answer 2

You can also use Ajax Blocks module which permits to load some blocks by additional AJAX request after loading the whole cached page when the page is viewed by anonymous user.

This module works well when you want to ajaxify some Drupal blocks.