Grunt plugin for image preloading through CSS2+ caching using the content property.

This is an example of a resulting generation. Images are dynamically added to the content property :

body:after {
  content: url(img1) url(img2);
  display: none;
}

This task will parse your CSS files and fill the content property. You can add other images manually.

The pseudo element body:after is added to a new CSS file or appended to an existing one (option).

Preloading images can be usefull for your HTML5 apps or websites. It's compliant with all CSS2+ browsers.

This plugin requires Grunt ~0.4.1

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-img-preload --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-img-preload');

In your project's Gruntfile, add a section named img_preload to the data object passed into grunt.initConfig().

Generate a preload block into a new file (dest.css) with all images paths found into source.css :

grunt.initConfig({
  img_preload: {
    my_target: {
      files: {
        'dest.css': ['source.css']
      }
    }
  }
});

You can manually preload some other files (paths must be relative to the dest CSS file) and append the preload block to an existing CSS dest file.

grunt.initConfig({
  img_preload: {
    options: {
      append: true,
      urls: ['../images/foo.png', ...]
    }
    my_target: {
      files: {
        'dest.css': ['source.css']
      }
    }
  }
});

Type: boolean Default value: false

If true, append the generated CSS block (with images preloading) to the end of the dest file (if exists).

If false, create a new dest file or replace it.

Type: Array Default value: []

Manually add images paths to preload (paths must be relative to dest location).