7

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 the img src works. These are here:

img data-src example THIS DOESN'T WORK AND I WANT IT TO

img src example THIS ONE DOES WORK.

Can somebody please fill in the blanks as to why the img data-src one doesn't work please? I am confused by this and been searching for an answer for hours.

Henry Brown
  • 2,219
  • 8
  • 31
  • 48

3 Answers3

20

You are using HTML5 data attributes which don't replace the normal HTML attributes of an HTML element, such as src. So your image needs to have a src attribute, whether it has a data-src or not, they are both independent of each other.

data-* attributes allow us to store extra information on standard, semantic HTML elements (...)

  • Loading an image when it appears on the screen:

A common approach to lazy-loading images is to set the src to a very small image, sometimes a 1x1px gif, and once the user scrolls and the image is on the screen replace the src with the real one. Something like this:

<img src="fake_small_image.gif" data-src="real_image.jpg">

That data-src could be called data-whatever_you_want. The idea is that using JavaScript you track the scrollTop position of the page. Once the image is going to appear you replace the src value "fake_small_image.gif" with the data-src value "real_image.jpg". The example you post in the comments of this answer, is ignoring the assignment of an initial src which is invalid.

var $window = $(window),
  window_height = $window.height() - 150, // I'm using 150 (a random number) so the image appears 150px after it enters the screen, so the effect can be appreciated
  $img = $('img.some_img'),
  img_loaded = false,
  img_top = $img.offset().top;

$window.on('scroll', function() {

  if (($window.scrollTop() + window_height) > img_top && img_loaded == false) {

    $img.attr('src', $img.attr('data-src_of_original_img'));

  }

});
#container {
  width: 100%;
  height: 200vh;
  background-color: grey;
}
.some_img {
  position: absolute;
  top: 100vh;
  width: 100%;
}
body {
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src_of_original_img="https://i.imgur.com/Lcsolww.jpg" alt="" class="some_img">
</div>
  • Show an image as soon as it is loaded:

A similar approach is to load the image virtually with JavaScript and once it is loaded assign the src to the image. This is done to prevent the image from showing before it is totally loaded.

var $img = $('img.some_img'),
  $img_created_with_js = $('<img src="' + $img.attr('data-src_of_original_img') + '">');

$img_created_with_js
  .on('load', function() {

    $img.attr('src', $img.attr('data-src_of_original_img'));

  });
.some_img {
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src_of_original_img="https://i.imgur.com/Lcsolww.jpg" alt="" class="some_img">

Both methods could be applied to an image. For example: you could wait until the user scrolls where the image is and then start to load it, but not show until it is fully loaded.

Resources:

Alvaro
  • 9,247
  • 8
  • 49
  • 76
  • Data attributes are not in any way specific to CSS so calling them "CSS data attributes" just makes this confusing. They can be matched with CSS selectors but they are mainly used for adding extra information to an element to be used by scripts. – Karl-Johan Sjögren Jan 08 '17 at 14:01
  • @Karl-JohanSjögren you are absolutely right, I meant HTML. – Alvaro Jan 08 '17 at 14:02
  • Thanks. this is a little clearer. Reason being this code here loads an image with just a img data-src tag: https://codepen.io/tevko/pen/BopQPL . And I have seen other sites doing this also... – Henry Brown Jan 08 '17 at 14:08
  • Thank you very much! This has helped. Although I still have one problem which I cannot work out. I am trying to replicate the header of this webpage: http://syrup.design/ux-ui-redesigns-1/ . The code that is used to display this image is img data-src and data-img . This is what I am really trying to achieve and still can't understand how it is done in this case? Thanks so far – Henry Brown Jan 08 '17 at 14:25
  • @HenryBrown the approach in that page is the same although the reason is different, let me add that other case in the answer :) – Alvaro Jan 08 '17 at 14:37
  • @Alvaro Could you create a fiddle explaining how it works. It will help a lot. – Jagajit Prusty Jan 08 '17 at 15:33
  • Thank you for your detailed answered. I am struggling with my original problem which is probably outside the scope of this question. But thank you for all your efforts. – Henry Brown Jan 08 '17 at 16:09
  • @JagajitPrusty added. – Alvaro Jan 08 '17 at 16:50
2

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;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img data-src="https://pmcdeadline2.files.wordpress.com/2013/07/chrisw__130723232812.jpg"/>

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

Alexander Dixon
  • 837
  • 1
  • 9
  • 24
0

You Can just Do like That in the script tags (js file),

So to assign the values of all images data-src to their src, very helpful especially in web scraping.

window.addEventListener("load", () => {

    // insert the image class name after (img.<enter class name>)

    img = $('img.product-summary-item-img');
    for (let i = 0; i < 6; i++) {
        img[i].src = String(img[i].getAttribute("data-src"));

    }

});
Nada
  • 1
  • 1