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 = integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous" /> < script src = integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous" ></ script > < script src = integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous" ></ script > < script src = 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 = 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 = style = "height:295px;" src = 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 > |
Output: