Ocasionalmente, las páginas web pueden contener imágenes que no son relevantes para el contenido de esa página. Estas imágenes inusuales se cargan mientras se carga la página web, y esto aumenta el tiempo de carga. Más tiempo de carga en las páginas web puede disminuir el número de visitantes.
En este artículo, encontramos una solución a este problema. Aprenderemos a mostrar imágenes sólo cuando los usuarios hagan clic en ellas utilizando HTML , CSS y JavaScript .
Cambiar las propiedades de visualización del atributo <img> usando JavaScript: en este método, estableceremos la propiedad de visualización dentro de la etiqueta < img> usando el atributo de estilo . Tenemos que configurar » display: none » para la imagen. Después de eso, cuando el usuario haga clic en el botón, llamaremos a una función de JavaScript que accederá a la imagen para cambiar su propiedad de visualización a bloquear.
Pasos:
- Crea el elemento <img> en el código HTML.
- Agregue estilo al elemento <img> y establezca las propiedades de visualización en ninguna.
- Cree una función «mostrar()» de JavaScript que pueda acceder a la imagen y cambiar la propiedad de visualización para bloquear .
- Agregue un botón en el código HTML que llama a la función «mostrar()» cuando el usuario hace clic en él.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Set display to none for image*/
#image {
display: none;
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
<h3>Click on the button to see image</h3>
<!-- Add id to image -->
<img id="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
alt="GFG image" />
</div>
<button type="button"
onclick="show()" id="btnID">
Show Image
</button>
<script>
function show() {
/* Access image by id and change
the display property to block*/
document.getElementById('image')
.style.display = "block";
document.getElementById('btnID')
.style.display = "none";
}
</script>
</body>
</html>
Producción:
Usando la etiqueta <img> con el atributo src vacío : Obviamente, con un valor src vacío , el usuario no podrá ver la imagen en la página web. Estableceremos un valor del atributo src utilizando la función de JavaScript que se implementa para que el usuario haga clic en el botón. Sin embargo, algunos navegadores como Chrome no eliminan el ícono de la imagen rota mientras usan este método.
Pasos:
- Crear elemento <img> con atributo src vacío .
- Cree la función «mostrar()» en JavaScript que puede obtener la imagen y agregar el enlace de origen de la imagen al atributo src .
- Agregue el botón HTML que llama a la función «mostrar()», cuando el usuario hace clic en él.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<div>
<h1>GeeksforGeeks</h1>
<h3>Click on the button to see image</h3>
<!-- img element without src attribute -->
<img id="image" src="" />
</div>
<button type="button"
onclick="show()" id="btnID">
Show Image
</button>
<script>
function show() {
/* Get image and change value
of src attribute */
let image = document.getElementById("image");
image.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
document.getElementById("btnID")
.style.display = "none";
}
</script>
</body>
</html>
Producción:
Usando Bootstrap Modal: Usaremos un modo de arranque para mostrar una imagen mientras hacemos clic en el botón. Necesitamos integrar el CDN de arranque con el código HTML para usarlo. Podemos agregar CDN de arranque a nuestro archivo HTML como se agrega en el código de ejemplo a continuación.
Pasos:
- Agregue CDN de arranque al archivo HTML.
- Cree un modal Bootstrap y agregue una imagen al cuerpo del modal.
- Cree un botón HTML para activar un modal.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <h2>GeeksforGeeks</h2> <p><b>Click on the button to see image</b></p> <!-- Button to launch a modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Show image </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <!-- Add image inside the body of modal --> <div class="modal-body"> <img id="image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" alt="Click on button" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> </div> </div> </div> </div> <!-- Adding scripts to use bootstrap --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity= "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity= "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity= "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por shubhamvora05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA