最初加载默认图像，直到通过jquery推送实际图像

Question

我们的 html 页面中有一个图像元素，并且其 src 正在通过 jquery 代码推送（如下所示）：

>! index.html
  <img class="userImageDisplay" src="" alt="my profile image" />

>! index.js
   var photoUrl = response.Photo;
   $(".userImageDisplay").attr('src', photoUrl);

页面加载时，它会显示替代文本几分之一秒，直到 src 更新。

我想在页面加载之前显示替代图像而不是替代文本。

尝试先设置默认值，然后重置响应照片值，但不起作用。

$(".userImageDisplay").attr('src', "https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png");
var photoUrl = response.Photo;
$(".userImageDisplay").attr('src', photoUrl);

Answer 1

要在页面加载时显示替代图像而不是替代文本，您可以将 img 元素的 src 属性设置为 HTML 代码中替代图像的 URL。然后，当响应照片 URL 可用时，您可以使用 JavaScript 更新 src 属性。

以下是修改代码的方法：

HTML

<img class="userImageDisplay" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" alt="my profile image" />

JS：

var photoUrl = response.Photo; $(".userImageDisplay").attr('src', photoUrl);

在 HTML 代码中，将 img 元素的 src 属性设置为页面加载时要显示的备用图像的 URL。在此示例中，我使用了来自 Pixabay 的空白个人资料图片。

在 JavaScript 代码中，您可以在响应照片 URL 可用时直接更新 src 属性。

通过在 HTML 代码本身中设置 src 属性，当页面开始加载时，甚至在 JavaScript 代码执行之前，将立即显示替代图像。一旦响应照片 URL 可用并且 JavaScript 代码更新 src 属性，实际的个人资料图像将无缝替换备用图像。

这种方法无需在 JavaScript 中设置默认值，并确保从一开始就显示替代图像，从而避免短暂出现替代文本。