Posted By

sarpay on 04/11/13

Tagged

image
jquery

Versions (?)

Last Edited at 04/11/13 07:52am

Statistics

Viewed 848 times

Favorited by 0 user(s)

Related snippets

Preload all bg images referenced in CSS

/ Published in: JavaScript

will preload any background image referenced in your CSS.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

(function($) {
  function parseImagesFromCSS(doc) {
    var i, j,
      rule,
      image,
      pattern = /url\((.*)\)/,
      properties = ['background-image', '-webkit-border-image'],
      images = {};
 
    if (doc.styleSheets) {
      for (i = 0; i < doc.styleSheets.length; ++i) {
        images = $.extend(images, parseImagesFromCSS(doc.styleSheets[i]));
      }
    } else if (doc.cssRules) {
      for (i = 0; i < doc.cssRules.length; ++i) {
        rule = doc.cssRules[i];
        if (rule.styleSheet) {
          images = $.extend(images, parseImagesFromCSS(rule.styleSheet));
        } else if (rule.style) {
          for (j=0; j < properties.length; j++) {
            image = pattern.exec(rule.style.getPropertyValue(properties[j]));
            if (image && image.length === 2) {
              images[image[1]] = image[0];
            }
          }
        }
      }
    }
    return images;
  };
  $.extend({
    preload: {
      images: function(doc) {
        doc = doc || document;
        var images = $.map(parseImagesFromCSS(doc), function(url) { return url; }),
          head = doc.getElementsByTagName('head')[0],
          style = doc.createElement('style');
        style.type = 'text/css';
        style.id = 'preload';
        style.innerHTML = 'body::after { content: ' + images.join(' ') + '; display: none; }';
        head.appendChild(style);
      }
    }
  });
})(jQuery);