即使在 DOM 加载之前如何更改 img 元素的 src答案

【问题标题】：how to change src of an img element even before the DOM loads即使在 DOM 加载之前如何更改 img 元素的 src
【发布时间】：2014-10-11 00:26:59
【问题描述】：

我想知道是否存在向用户显示一堆图像的轮播，但是可以说基于用户，轮播中显示的 img 需要更改为其他内容。即使在页面加载之前，如何更改 img src？ DOM 实际上并不存在让我们获取 img 元素的 dom 元素并将其 src 更改为新图像？怎么办？

我在想可能是在 head 部分中有一个内联脚本标记，其中异步设置为 false，这不会阻止 DOM 的加载。我不知道。请让我知道是否有任何其他替代方案或 html5 功能

【问题讨论】：

如果您想在页面加载之前更改图像源，您必须在服务器端进行。
您可能会在使用 AJAX 加载页面后立即插入图像，因此它看起来会在页面加载后立即加载。但是在使用 javascript 加载页面之前是不可能的，不包括 node-js。您需要一种服务器端语言，例如 PHP、ASP.NET C# 或 node-js。

标签： javascript dom imagesource

【解决方案1】：

在加载之前，您不能使用 JavaScript 访问 DOM。处理这个问题的最好方法是使用像把手这样的模板语言在服务器端编译你的 HTML（取决于你的后端语言是什么）。但是，如果这不是一个选项，您也可以在图像位置放置一个占位符加载符号，然后在 <img> 加载到 DOM 后动态添加 src url，然后使用 JS 或 jQuery更改src 属性。

希望有帮助！

【讨论】：

【解决方案2】：

在 DOM 加载之前从字面上“更改”源没有多大意义，否则你为什么要设置该源开始，对吧？但正如其他人所说，Javascript 将在浏览器的那一刻被执行，所以如果您根据任何会话标准等加载图像源，您可以使用加载页面时的事件，执行任何特定的 AJAX 请求，例如使用 jQuery：

$(document).ready(function() {
    $.ajax({
        url: '/getPhotos',
        success: function(res) {
            res = JSON.parse(res);
            for (var i in res) {
                $('ul#carousel').append('<li><img src="'+res[i].src+'" /></li>');
            }
        }
    });
);

你想要什么？

【讨论】：

我可以在 javascript 中使用 promise，一旦 dom 准备好，回调就会执行？？
如果 jQuery 不是你的最爱，你可以使用 window.onload - 是的，我不明白为什么你不能在 promise 旁边使用它