What Are All The Differences Between Src and Data-Src Attributes

What are all the differences between src and data-src attributes?

The attributes src and data-src have nothing in common, except that they are both allowed by HTML5 CR and they both contain the letters src. Everything else is different.

The src attribute is defined in HTML specs, and it has a functional meaning.

The data-src attribute is just one of the infinite set of data-* attributes, which have no defined meaning but can be used to include invisible data in an element, for use in scripting (or styling).

why img tag has both data-src and src? what's the difference between those?

Any attribute that starts with data- is a custom attribute. Your application can use them however you see fit, but the browser doesn't do anything specific with them.

The href value is an empty javascript block which means that clicking the link won't take you to a new page, though you should give it a value of void(0) to ensure it works correctly. In these cases your application will typically have custom click handlers on the link that execute some action when the link is clicked. That click handler may use the value of data-src.

Loading an image using data-src and not just src

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="Sample Image" class="some_img"></div>

Can i use data-src in <img> instead of src attribut?

Can we use data-src instead of src attribute in with no side effects?

No.

data-src, like all data- attributes is a mechanism to provide custom data for (primarily) JavaScript on a website to use.

src determines where to load an image from.

---

It sounds like you are using data-src and JS to populate src dynamically. While there are reasons for do this, you've seen the negative impact it has on Google and you'll have similar problems when JavaScript fails.

Use src, even if it for a default you override later. (And if you are overriding it with JavaScript, consider if it would be better to override it with srcset instead).

Why the object tag has the data attribute instead of src?

There's no specific reason, it was designed like that by the w3c.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object

One of the big differences from the other tags is that, with the object tag, you can also declare your mime type of the data in the "type" attribute.

---

Related Topics