Loading an image using data-src and not just src

Question

I am trying to load an image using the img data-src tag instead of just the img src. I have created two simple JSFiddle\'s although only the one with t

Answer 1

An image without the "src" attribute defined is bad HTML. The only instance you would do this is if you wanted to delay the image load and queue it in with some scripts (that or dynamically load difference images with one image tag on the page).

Here is an example using data attributes and jQuery to acheive an image being loaded without necessarily invoking the src attribute in the HTML.

$('img').each(function() {
	var imageDataSource = $(this).data('src').toString();
  var setImageSource = $(this).attr('src', imageDataSource);
});

 img {
  width: 250px;
  height: auto;
  }

https://jsfiddle.net/z5t1gpeo/2/