I have an image that is being placed by an external script:
<img src=".png" id="image1">
I need to swap (replace) the image src with my image,
<img src=".png" id="image2">
AFTER the original script loads.
I found solutions for changing an image src with a click or mouseover, or for more plex sets of images, but can I force an image swap at pageload for a single image without an additional action required? Thanks in advance for your suggestions.
I have an image that is being placed by an external script:
<img src="https://example1./image1.png" id="image1">
I need to swap (replace) the image src with my image,
<img src="https://example2./image2.png" id="image2">
AFTER the original script loads.
I found solutions for changing an image src with a click or mouseover, or for more plex sets of images, but can I force an image swap at pageload for a single image without an additional action required? Thanks in advance for your suggestions.
Share Improve this question asked Jul 12, 2015 at 16:16 carpeperdiemcarpeperdiem 131 silver badge4 bronze badges 2- One way or another, you need to be able to tell when this other script has placed the image; we don't have enough information to know if this script function occurs "at page load", "on document load", "on library load", etc. Check the script in question to see if it provides "on loaded" or "on ready" callback arguments. – Katana314 Commented Jul 12, 2015 at 16:18
- Thank you for your reply. I have no idea how to check for this. Are there methods to try the image src replacement and see if it works? – carpeperdiem Commented Jul 12, 2015 at 16:24
4 Answers
Reset to default 2You need to do this on window.load event.
- If you want to swap it after DOM loaded:
$(document).ready(function () {
$('#image1').attr('src', 'http://placehold.it/150x350');
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/350x150" id="image1">- If you want to swap it after the original image will be loaded:
Sometimes you want to manipulate pictures and with $(document).ready() you won’t be able to do that if the visitor doesn’t have the image already loaded. In which case you need to initialize the jQuery alignment function when the image finishes loading.
But it's quite useless. User will almost unable to see original image (it will be swapped very quickly).
$(window).load(function () {
$('#image1').attr('src', 'http://placehold.it/150x350');
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/350x150" id="image1">http://www.sitepoint./types-document-ready/
If I get you right, you want to execute the change on page load:
$(function() {
$("#image1").attr("src", "https://example2./image2.png")
})
Here you go,
$(function(){
$('#image1').attr('src', $('#image2').attr('src'));
})
Explanation:
$('#image2').attr('src') will return the src attribute of your image which is present in img id=image2 and that src will be set in the src attribute of img id=image1
And this will be triggered automatically, because jquery ensures,
$(function(){
//wherever you write here will be executed only after DOM load, no external trigger needed
})
Hope it helps :)
If you want to change the image as fast as possible you can use DOMNodeInserted event.
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<script>
// Swap out the image as soon as the DOM is inserted
$('body').on('DOMNodeInserted', '#image1', function(e) {
$("#image1").attr("src", "http://placehold.it/100x100").attr("id", "image2");
});
</script>
<div id="js-putImageHere"></div>
<script>
// Here is the external code that loads the image you don't want
$("#js-putImageHere").html('<img src="http://placehold.it/350x150" id="image1">');
</script>
</body>