Question

如何在加载网页中的所有其他内容后最终显示图像。我在页面上有一个图像，按下按钮时会从数据库中检索该图像。我想首先加载整个页面，然后在加载内容后最后加载图像。有什么帮助吗？

Answer 1

您可以使用以下函数在javascript中加载并添加到html中：

$(window).load(function() {
  // in 2 steps for clarity, can be optimized
  img_html = '<img src="/path/to/image" alt="bla bla" />';  // step 1, generate image html
  $("#image_div").append(image_html);                       // step 2, append image to some div

  // optional, see my comment below
  $("#image_div img").load(function() {
    // triggers when newly added image is completely loaded
  });
});

确保在其他所有内容完成加载后开始加载图像。

请注意，示例中的图像在加载时显示，如果您想先加载它然后显示它，则必须隐藏它并使用图像的.load事件来显示它。 / p>

Answer 2

如果通过加载意味着下载页面的各个部分并构建DOM，那么：

$(document).ready(function() {
    $('#theimage').show();
});

Answer 3

$(document).ready(function() {
  $('#imageid').attr( "src", "/new/path/to/image.jpg" );
});

Answer 4

在您初次加载页面时，您只需编写一个占位符（div，span，甚至是没有分配任何内容的图像。）

然后附加到按钮单击事件，您可以使用JQuery + Ajax回调（不回发，或者是否有任何理由回发OTHER而不是获取图像？）到您的服务器（或Web服务）以获取图像路径并将其分配给占位符。您可以通过各种jquery动画来增强它，以“淡入”您的图像或向下滑动......您喜欢什么。

Answer 5

你可以使用javascript在dom加载后动态设置图片网址吗？

如果你有html结构

<image id="image_id"/>

然后使用以下jquery代码：

$(document).ready(function() {
  $("#image_id").attr("src", "link_to_image");
});

否则，你可以使用一些css技巧，首先隐藏图像，这样它就不会从服务器上下载。

然后使用以下jquery代码在DOM准备好后显示图像：

$(document).ready(function() {
  $("#image_id").show();
});

同时，查看图像预加载。这可能对您有用http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

如何在加载网页中的所有其他内容后最后显示图像

5 个答案: