¿Por qué las imágenes de tarjetas usan data-src (no src) para la imagen en Bootstrap 4?

Las imágenes de la tarjeta Bootstrap 4 usan src en las etiquetas de imagen para proporcionar la ubicación que se cargará en la etiqueta de imagen dada y data-src para proporcionar información adicional que JavaScript puede usar para mejorar la experiencia de los usuarios. Para las etiquetas data-src y src , podemos concluir de la siguiente manera:
src:

Si desea cargar y mostrar una imagen en particular, use .src para cargar la URL de esa imagen.

data-src:

Si desea una pieza de metadatos (en cualquier etiqueta) que pueda contener una URL, use data-src o cualquier data-xxx que desee seleccionar.
Los atributos data-* se utilizan para almacenar datos personalizados privados para la página o la aplicación.
Los atributos data-* nos brindan la capacidad de incrustar atributos de datos personalizados en todos los elementos HTML.
Luego, JavaScript puede usar los datos para crear una experiencia de usuario más atractiva.

Sintaxis:

Usando el atributo src:

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

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

Usando el atributo data-src:

<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>

El siguiente ejemplo ilustra el concepto anterior:

Ejemplo: El siguiente código se puede ver cómo se usa el atributo src para proporcionar un enlace a la imagen y data-src se puede usar para proporcionar información adicional a JavaScript como aquí se usó para cambiar el enlace src original para la imagen con uno en el atributo data-src .

<!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>

Producción:

Publicación traducida automáticamente

Artículo escrito por kushaggarwal110085 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta