Views Infinite Scroll with background image

Experimental project

This is a sandbox project, which contains experimental code for developer use only.

This module allows you to use Views Infinite Scroll module with Image URL formatter for refresh background images of new loaded elements.

Problem & Solution

For safety reasons, Views module doesn't allow code, like <div style="background: url([field_image]) no-repeat;">...</div> on view.

Therefore, it's impossible to update background image of new Views item (who show from Image URL formatter and loaded with Views Infinite Scroll).

But data attributes is allowed! Module add new variable data-bg-image to use on your view. Use code, like <div data-bg-image="[field_image]">...</div> as well.

Requirements

Install & Configure module

Download module, upload to server (./sites/all/modules);
Go to administration page (admin/modules) and enable module;
Go to module settings page (admin/config/content/views_infinite_scroll_bg_image/settings) and follow instructions.