如何让 JQuery 在显示页面之前交换图片

How to get JQuery to swap picture prior to page being displayed

本文关键字：交换 JQuery 显示      更新时间：2023-09-26

>我有以下脚本可以交换图像的源。但是，目前这种情况发生在页面加载后，因此用户在切换到正确的图像之前会经历看到一张图片的瞬间。

<script>
window.onload = function () {
    var winnerName = $("#leaderboard tr td:eq(1)").text().trim();
    $("#pictureDiv img").attr("src", "/Content/Images/" + winnerName + ".jpg");
};
</script>

如何在加载前切换图像？

注意我也尝试过：

<script>
$(function() {
    var winnerName = $("#leaderboard tr td:eq(1)").text().trim();
    $("#pictureDiv img").attr("src", "/Content/Images/" + winnerName + ".jpg");
});
</script>

但这会导致同样的事情发生

window.onload 或 jQuery 的 $（function（）...仅当页面完全加载时，才会调用函数。您可以获得的最接近的是将该函数添加到图像加载处理程序中。

<img src="..." onload="function() {...}">

但我怀疑同样的事情仍然会发生。

如果需要使用 javascript 设置图像的 src，那么您可以尝试动态创建映像并将其添加到需要的位置，使用如下所示的内容。

$(function() {
    var winnerName = $("#leaderboard tr td:eq(1)").text().trim();
    var imgElement = $('<img>').attr("src", "/Content/Images/" + winnerName + ".jpg");
    
    $("#pictureDiv").append(imgElement);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pictureDiv"></div>

相关文章：