Why card images use data-src (not src) for image in Bootstrap 4 ?

Bootstrap 4 card images use src in image tags to providing the location to be loaded in the given image tag and data-src to provide additional information that can be used by JavaScript for improving the users’ experience. For data-src and src tag we can conclude as follows:
src:

If you want to load and display a particular image, then use .src to load that image URL.

data-src:

If you want a piece of metadata (on any tag) that can contain a URL, then use data-src or any data-xxx that you want to select.
The data-* attributes are used to store custom data private to the page or application.
The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.
The data can then be used by JavaScript to create a more engaging user experience.

Syntax:

Using src attribute:

<img id="img1" src="abc.jpg">

<script>
    var url = document.getElementById("img1").src;
</script>

Using data-src attribute:

<img id="img1" src="xyz.jpg" data-src="abc.jpg
<script>
    var ele = document.getElementById("img1");

    // Switch the image to the URL specified in data-src
    ele.src = ele.dataset.src;
</script>

Below example illustrates the above concept:

Example: The below code can be seen how src attribute is used to provide a link to image and data-src can be used to provide additional information to JavaScript like here it was used to change the original src link for the image with one in the data-src attribute.

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
  
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" /> 
  
    <meta http-equiv="X-UA-Compatible"
        content="ie=edge" /> 
  
    <title> 
        Why card images use data-src (not src) 
        for image in Bootstrap 4 ? 
    </title> 
  
    <link rel="stylesheet"
        href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity= 
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous" /> 
          
    <script src= 
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity= 
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script> 
              
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity= 
"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script> 
              
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
            integrity= 
"sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin="anonymous"> 
    </script> 
  
    <style> 
        h1 { 
            color: green; 
        } 
        .second { 
            float: right; 
            margin: 20px; 
        } 
        .first { 
            float: left; 
            margin: 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <b>A Computer Science Portal for Geeks</b> 
    </center> 
      
    <div class="container"> 
        <div class="card first" style="width: 18rem;"> 
            <img class="card-img-top" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190506125816/avt.png"
                alt="Card image cap" /> 
            <div class="card-body"> 
                <h5 class="card-title">Courses</h5> 
                <p class="card-text"> 
                    Attend the courses Increase 
                    the probability 
                </p> 
                <a href="#" class="btn btn-primary">Attend</a> 
            </div> 
        </div> 
          
        <!-- It loaded with JavaScript to allow 
            lazy loading of images -->
        <div class="card second" style="width: 18rem;"> 
            <img id="img1" class="card-img-top"
                data-src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200121112744/logo11.png"
                style="height:295px;"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190506125816/avt.png"
                alt="Card image cap" /> 
                  
            <div class="card-body"> 
                <h5 class="card-title">Interview</h5> 
                <p class="card-text"> 
                    Prepare your self for the Interview 
                </p> 
                <a href="#" class="btn btn-primary">Attend</a> 
            </div> 
        </div> 
    </div> 
  
    <script> 
        var ele = document.getElementById("img1"); 
          
        // Switch the image to the URL 
        // specified in data-src 
        ele.src = ele.dataset.src; 
    </script> 
</body> 
  
</html> 

Ouput:

My Personal Notes

Recommended Posts: