Given an image or a set of broken images, the task is to fix all these images using jQuery. There are two approaches that can be taken here:
Approach 1: Using jQuery methods such as bind() and attr()
jQuery bind() Method: This method is used to bind or attach one or more event handlers for the element/elements corresponding to the specific selector.
Syntax:
$(selector).bind(event, eventData, func);
Parameter: It accepts three parameters which are explained in detail below:
- event: A string that contains one or more event types such as “click”, “keypress”.
- eventData: An object which contains data that can then be passed over the selected elements.
- func: An event handler to execute on the selected elements.
jQuery attr() Method: This method is used to set or get the attributes of the element/elements corresponding to the specific selector.
Syntax:
-
To return the attribute value:
$(selector).attr(myAttribute);
-
To set the attribute with its value:
$(selector).attr(myAttribute, val);
-
To set the attribute with its value using a function:
$(selector).attr(myAttribute, function(i, curValue));
-
To set multiple attributes:
$(selector).attr({attr1: val1, attr2: val2, ...});
Parameter: It accepts the following parameters which are explained in detail below:
- myAttribute: Set the name of the attribute.
- val: Set the value of the attribute.
- function(i, curValue): Construct a function that returns the attribute value to set.
- i: Index position of the element received.
- curValue: Current attribute value of selected elements.
Example: There are three images in the following example, one of which contains a broken uniform resource locator (or URL). Bind an error event to any of the images if an error is caused in loading the image (in this case the middle image). Now, update the src attribute of the image to point to a new image from the web.
<!DOCTYPE html> <html>
<head>
<!-- jQuery -->
<script src=
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
20190710102234/download3.png" alt="GeeksForGeeks Logo Green" />
<!-- Broken image -->
uploads/20210915115837/gfg3-300x300.png"
alt="GeeksForGeeks Logo White" />
<script type="text/javascript">
$("img").bind("error", function (e) {
var $this = $(this);
$(this).attr("src","https://media.geeksforgeeks.org/wp-content/"+
"uploads/20220208183723/responsive1-295x300.png");
});
</script>
</body>
</html>
|
Output:
Without jQuery:
With jQuery:
Approach 2: Using jQuery methods such as bind() and hide()
jQuery hide() Method: This method is used to hide the element corresponding to the specific selector.
Syntax:
$(selector).hide(duration, easing, callFunc);
Parameter: It accepts three parameters which are specified below:
- duration: Set the speed of the hide effect.
- easing: Set the speed of the element at a different point.
- callFunc: A call back function to be executed after the hide operation.
Example: This example is identical to the previous example but the difference is that instead of updating the src attribute of the broken image, we hide the image (similar to display: none; in CSS).
<!DOCTYPE html> <html>
<head>
<!-- jQuery -->
<script src=
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<!-- Broken image -->
cdn-uploads/20190710102234/download3.png"
alt="GeeksForGeeks Logo Green" />
uploads/20210915115837/gfg3-300x300.png"
alt="GeeksForGeeks Logo White" />
<script type="text/javascript">
$("img").bind("error", function (e) {
$(this).hide();
});
</script>
</body>
</html>
|
Output:
Without jQuery:
With jQuery: