Question

我想用一些网址设置一个图像控件，但图像只应在用户完全加载时显示给用户。以下是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

</head>
<body>
    <img id="1" />
    <img id="2" />
</body>

<script type="text/javascript">

    $("<img/>").attr("src", $("#1").attr("src"))
                .load(function() {
                    //How to set image 2 with with image which I just loaded
                });
</script>

</html>

上面我在内存中加载了img1的图像，现在我将如何将相同的图像设置为img2。我在img1的内存中加载图像，因为我想立即用img1 src显示img2。

Answer 1

首先，HTML id元素不能以数字开头，因此id="1"无效（它可能无法在每个浏览器中使用）。我建议使用公共前缀（例如img）。因此1将成为img1而2将成为img2。

其次，在事件处理程序内部，this设置为触发事件的元素，因此：

.load(function() {
    // If you want to use the same element to pre-load multiple images
    this.src = document.getElementById("img2").src;

    // Or, if you want to set the pre-loaded image somewhere in the DOM
   document.getElementById("img2").src = this.src;

   // Or, if you want to inject this now pre-loaded img tag into the DOM directly
   $("some_selector").append(this);
});

会起作用。

将加载的图像设置为图像控件

1 个答案: