javascript - 页面加载后交换(替换)图像源？

Question

我有一个由外部脚本放置的图像:

<img src="https://example1.com/image1.png" id="image1">

我需要用我的图像交换(替换)图像 src，

<img src="https://example2.com/image2.png" id="image2">

原始脚本加载后。

我找到了通过单击或鼠标悬停来更改图像 src 的解决方案，或者针对更复杂的图像集的解决方案，但是我可以在页面加载时强制对单个图像进行图像交换，而不需要执行其他操作吗？预先感谢您的建议。

Answer 1

您需要在 window.load 事件上执行此操作。

1. 如果您想在 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">

如果您想在加载原始图像后交换它:

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.

但是这没什么用。用户几乎看不到原始图像(它将很快被交换)。

$(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/