Question

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

<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>

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

Answer 1

只有在页面完全加载时才会调用window.onload或jQuery的$（function（）...函数。最接近的是将函数添加到images onload handler。

<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>

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

1 个答案: