API

Current API (subject to change during 0.x releases):

• Inline all <img> and <input type="image"> references:

  inlineresources.loadAndInlineImages(doc, options)
  

• Inline all @import, background-image & font-face occurrences in <style> elements:

  inlineresources.loadAndInlineStyles(doc, options)
  

• Inline all CSS <link rel="stylesheets"> elements including @import, background-image & font-face occurrences:

  inlineresources.loadAndInlineCssLinks(doc, options)
  

• Inline all <script> references:

  inlineresources.loadAndInlineScript(doc, options)
  

Inline all references (convenience method):

inlineresources.inlineReferences(doc, options)

Parameters

• doc is a Document object (DOM)
• options is key/value pairs of further options:
  • baseUrl the URL base of the document which relative resources will be based on, default: null.
  • cache allows fine-tuning caching behaviour:
    • 'none' forces requested pages not to be cached by the browser by adding a unique query string in the form of "?_=[timestamp]" to each request,
    • 'repeated' forces a non-cached load for initial calls, while allowing the browser to cache repeated calls to the same URL,
    • 'all' will not employ any cache busting (default).
  • cacheBucket an object holding the library's own in-memory cache. Only effective in reuse between several calls to the API and cache set to some value other than none. Should be initialized with {}.
  • nonce a value to be set on created script and style elements. Useful when a Content Security Policy is in place that requires it.

Return value:

All methods return a promise that is fulfilled once the content is rendered. The general call pattern for any of the methods is

loadAndInlineImages(doc, options)
    .then(function (failedResources) {
         ...
    });

The callback is called with a list of resources that failed to load in the form { resourceType: "TYPE_OF_RESOURCE", url: "THE_FAILED_URL", msg: "A_HUMAN_READABLE_MSG" }

Resource types:

• image an <img href=""> or <input type="image" src="">
• stylesheet a <link rel="stylesheet" href=""> or @import url("");
• backgroundImage a background-image: url("");
• fontFace a @font-face { src: url("") }
• script a <script src="">

For questions, reach out to @cburgmer on Twitter.