This section describes our image mixins and how we use asynchronous image loading.
When adding inline images to a document you should always use the +image Jade mixin.
image(platform, lgSize, lgSrcs, smSize, smSrcs, xsSize, xsSrc)
platform - String. The platform that the image is to be shown on. Value options are 'xs', 'sm', 'lg'. This value should generally be provided by the application that uses the mixin, and should only be hardcoded in special cases.
lgSize/smSize/xsSize - Array of integers. The size of the image (x,y) per platform. Both width and height are required.
lgSrcs/smSrcs/xsSrc - Array of strings. The src(s) for the image. The first value of the array is 1x, the second is 2x. 2x is optional. See High DPI section for more information.
Please note that on xs any src other than the first is ignored - 2x is not available on xs.
+image('lg', [400,100], ['http://dummyimage.com/400x100&text=this-is-lg'])
+image('sm', null, null, [400,100], ['http://dummyimage.com/400x100&text=this-is-sm'])
+image('xs', null, null, null, null, [400,100], ['http://dummyimage.com/400x100&text=this-is-xs'])
This is the typical use case for the mixin. Size and src parameters are provided for more than one platform, and the platform to render for is provided by the application in which the mixin is used.
This demo site does not perform platform detection, and therefore the lg variant will always be displayed in the example below.
+image(platform, [400,100], ['http://dummyimage.com/400x100&text=LG'], [300, 75], ['http://dummyimage.com/300/75&text=SM'], [200, 50], ['http://dummyimage.com/200/50&text=XS'])
All calls to the image mixin that do not have a platform of xs will automatically be lazy loaded using js.
If you must circumvent lazy loading for some reason it is possible to specify the platform as 'xs'. This will remove the option for a 2x version.
+image('lg', [400,100], ['http://dummyimage.com/400x100/634&text=lazy'])
+image('sm', null, null, [200, 60], ['http://dummyimage.com/400x100&text=1x', 'http://dummyimage.com/800x200&text=2x'] )
To enable an indicator for an image, simply set the
data-indicator attribute to true. An indicator will then show during image loading. See the async images demo below for examples on how it looks in action. (You may need to throttle your connection to see the effect)
The images below are loaded asynchronously as they become visible in the viewport. Scroll fast to see them load!
To enable deferred image rendering for an image (the image will not be rendered until loaded in its entirety), set the
data-defer attribute to true.
The images below are fairly large and should take considerable time to load. When loaded, they should appear 'instantly'. (You may need to throttle your connection to see the effect)