jquery - 使用 Jquery 将图像 src 替换为输入隐藏值

Question

我隐藏了以下输入，其值为“/fr/images/findacourse_logo_tcm10-268.gif”。

<input type="hidden" id="Qt_Email_Image" value="/fr/images/findacourse_logo_tcm10-268.gif"/>

下面我有另一个输入图像，其 src = "/images/quote/Quote_Email_Button.JPG"

<tr>
    <td>
         </td>
    <td colspan="2" class="">
        <input type="image" border="0" alt="Email me this quote " src="/images/quote/Quote_Email_Button.JPG" id="Quote_btnEmail" name="Quote:btnEmail"/>
    </td>
</tr>

现在我希望在运行时将输入图像 src 替换为上面的输入隐藏值，并将显示上面的图像而不是 src 中的图像链接。这样我上面的html就变成了

<tr>
    <td>
         </td>
    <td colspan="2" class="">
        <input type="image" border="0" alt="Email me this quote " src="/fr/images/findacourse_logo_tcm10-268.gif" id="Quote_btnEmail" name="Quote:btnEmail"/>
    </td>
</tr>

我想使用Jquery来解决上述问题，请建议!

谢谢。

Answer 1

请注意，当您像这样替换图像时:

$('#Quote_btnEmail').attr('src', $('#Qt_Email_Image').attr('value'))

然后您当前的图像“Quote Email Button.JPG”将被删除，然后新图像“findacourse logo tcm10-268.gif”将被加载并显示。因此，如果加载部分需要一段时间，那么用户会看到闪烁。

为了避免这种情况，您可以先加载“findacourse logo tcm10-268.gif”，然后立即将其显示给用户:

var img = new Image();
$(img).load( function () {
    $('#Quote_btnEmail').attr('src', img.src);
});
img.src = $('#Qt_Email_Image').val();