JavaScript Library To Change Image Source Based On Viewport Size – Dynamic Image

Category: Image , Javascript | February 28, 2015
Author:jockbert
Views Total:394 views
Official Page:Go to website
Last Update:February 28, 2015
License:MIT

Preview:

JavaScript Library To Change Image Source Based On Viewport Size – Dynamic Image

Description:

Dynamic Image is a lightweight JavaScript library that dynamically swaps out the source of the image based on the viewport size. Great for responsive web layout to reduce the page load time and save the server bandwidth.

How to use it:

Include the dynamicImage.min.js in the web page.

<script src="dynamicImage.min.js"></script>

Add an image with empty ‘src’ attribute into the web page.

<img id="aPhoto" src="" style="width:100%" >

Enable the Dynamic Image and define an array of images for different screen sizes.

var myImage = new DynamicImage("aPhoto");
myImage.setWidthAlternatives(
  [100,150,200,300,500,750,1000,1500,2000,3008],
  ["100.jpg",
  "150.jpg",
  "200.jpg",
  "300.jpg",
  "500.jpg",
  "750.jpg",
  "1000.jpg",
  "1500.jpg",
  "2000.jpg",
  "original.jpg"]);

 window.onresize = myImage.delayedUpdate;

You Might Be Interested In:


Leave a Reply