Skip to content

Latest commit

 

History

History
111 lines (82 loc) · 3.65 KB

README.md

File metadata and controls

111 lines (82 loc) · 3.65 KB
Raw

What is this?

This repository holds What Cheer's spin on the JavaScript solution to the responsive images problem.

Our JavaScript follows the existing pattern of storing the sizes in DOM attributes, similar to projects like HiSRC, but with the twist of having only two attributes.

We have used this code in production but it is still a little wobbly, so YMMV.

How do I use it?

This is a full client side/markup solution, so you'd better be able to edit all your HTML. If you can't, or need something a little more automatic, perhaps Adaptive Images.

The JavaScript

This library has no dependencies, so you can just drop in responsive-images.min.js and then call WhatCheer.Responsive.updateImages whenever you need to. Here's an example:

<script src="responsive-images.min.js"></script>
<script>
	window.onresize = WhatCheer.Responsive.updateImages;
	document.body.onload = WhatCheer.Responsive.updateImages;
</script>

You may find it better to de-bounce your window.onresize calls a bit. The code to prevent multiple requests for image assets does not exist, so it's your responsibility, if you care.

<script>
	( function () {
		WhatCheer.Responsive.updateImages();
		var resizeDebounce = null;
		window.onresize = function () {
			window.clearTimeout( resizeDebounce );
			resizeDebounce = window.setTimeout( WhatCheer.Responsive.updateImages, 150 );
		};
	} );
</script>

The Markup

Your HTML communicates to the script through two attributes, data-format and data-breaks.

data-format

This attribute communicates the format of the path for image versions. We assume you keep all of your files together in one place and have a reasonable, consistent naming scheme.

In the path format string any instances of the string {{s}} will be replaced with the breakpoint name to create the final path for a file.

<img data-format="images/{{s}}.png" />

data-breaks

This attribute specifies the width-based breakpoints for images. These breakpoints are given in pixel values, with a semicolon ; delimeter. They should proceed from largest to smallest.

<img data-breaks="900;600;400" />

Optionally these breakpoints can have name strings, which are separated from the size value by a colon :.

<img data-breaks="900;600:medium;400" />

Examples

Regular

<!doctype html>
<html>
	<head>
		<title>Responsive Images</title>
	</head>
	<body>
		<img src="images/400.jpg" data-format="images/{s}.jpg" data-breaks="900;600:medium;400" />
		<script src="responsive-images.min.js"></script>
		<script>
			window.onresize = WhatCheer.Responsive.updateImages;
			document.body.onload = WhatCheer.Responsive.updateImages;
		</script>
	</body>
</html>

Weird Files All Over The Place

<!doctype html>
<html>
	<head>
		<title>Responsive Images</title>
	</head>
	<body>
		<img src="images/400.jpg" data-format="{s}" data-breaks="900:http://google.com/secret-files/900.jpg;600:http://loljk.s3.aws.com/medium.jpg;400:images/400.jpg" />
		<script src="responsive-images.min.js"></script>
		<script>
			window.onresize = WhatCheer.Responsive.updateImages;
			document.body.onload = WhatCheer.Responsive.updateImages;
		</script>
	</body>
</html>

Contributing

We aren't perfect. If you see a bug, please let us know via the issues tab!