页面加载后交换（替换）图片src？
[英]Swap (replace) image src after page load?
问题描述
I have an image that is being placed by an external script: 
我有一个由外部脚本放置的图像：
<img src="https://example1.com/image1.png" id="image1">
I need to swap (replace) the image src with my image, 我需要用我的图像交换（替换）图像src，
<img src="https://example2.com/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 complex sets of images, but can I force an image swap at pageload for a single image without an additional action required? 我找到了通过单击或鼠标悬停或更复杂的图像集更改图像src的解决方案，但是是否可以在页面加载时强制为单个图像交换图像，而无需执行其他操作？ Thanks in advance for your suggestions. 预先感谢您的建议。
4 个解决方案
解决方案1
1 已采纳 2015-07-12 16:19:59
If I get you right, you want to execute the change on page load: 如果我理解正确，则要在页面加载时执行更改：
$(function() {
$("#image1").attr("src", "https://example2.com/image2.png")
})
解决方案2
1 2015-07-12 16:23:26
You need to do this on window.load event. 您需要在window.load事件上执行此操作。
- If you want to swap it after DOM loaded : 如果要在DOM加载后交换它：
$(document).ready(function () { $('#image1').attr('src', 'http://placehold.it/150x350'); });
<script src="https://ajax.googleapis.com/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.
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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="http://placehold.it/350x150" id="image1">
http://www.sitepoint.com/types-document-ready/ http://www.sitepoint.com/types-document-ready/
解决方案3
0 2015-07-12 16:20:07
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 $('#image2').attr('src')将返回存在于img id=image2中的图像的src属性，并且该src将在img id=image1的src属性中设置
And this will be triggered automatically, because jquery ensures, 而且这将自动触发，因为jquery确保了，
$(function(){
//wherever you write here will be executed only after DOM load, no external trigger needed
})
Hope it helps :) 希望能帮助到你 ：）
解决方案4
0 2015-07-12 16:33:23
If you want to change the image as fast as possible you can use DOMNodeInserted event. 如果要尽快更改图像，可以使用DOMNodeInserted事件。
<script src="https://ajax.googleapis.com/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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.