Skip to content
Christoph Burgmer edited this page Jul 2, 2016 · 4 revisions

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 {}.

###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.

Clone this wiki locally