加载文档的其余部分后替换图像并加载答案

【问题标题】：Replace images and load once rest of document has been loaded加载文档的其余部分后替换图像并加载
【发布时间】：2011-10-19 16:54:06
【问题描述】：

在我们的应用程序中，我们将 HTML 存储在 db 表中并在某个时间点将其呈现给用户，HTML 中可以包含相当多的图像（可能很大），这是我想要的要做的是在我们从数据库中检索 HTML 时对其进行预解析，并将任何图像标签替换为允许我们在将其余数据呈现给客户端后加载图像的东西。

即。文档被返回，图像被客户端请求和加载，而不是客户端必须等待整个文档和图像加载才能看到任何内容。

目前是否存在提供此类功能的任何东西，可能是 jquery 插件或类似插件？

我们的应用是一个使用 Telerik 控件（使用 jquery）的 asp.net 3.5 网站

【问题讨论】：

【解决方案1】：

用“#”替换您的 img src 属性，并添加一个自定义属性，如下所示：

<img src="#" delayed="http://mydomain.com/myimage.png"/ >

然后，当你的页面加载时添加一个 javascript 行，它会做这样的事情（未经测试，但你明白了）：

$('img').each(function(){
  $(this).attr('src', $(this).attr('delayed'));
});

【讨论】：

这种方法适用于大多数人，但如果未启用 Javascript，则会完全失败。
你生活在哪个世界？他的应用程序是基于 jquery 的。希望你意识到 jquery 是 JS 中的一个库。以及您将如何实现相同的目标，否则请随时提供您的解决方案，否则不要拖钓。
我认为 Caspar 有一个正确的观点，因为如果正确完成，jquery 可以优雅地降级，但是无论如何我们的应用程序确实需要启用 JS 才能正常工作
@user350374，是的，我知道 jQuery 是一个 JS 库。我的意图不是拖钓，而是指出您在回答中提倡的解决方案将完全破坏没有 Javascript 的访问者的页面。 Daniel 正在构建一个纯 Javascript 应用程序，其中 Javascript 始终可用，在这种情况下它非常好，但在此页面上绊倒的其他人可能有不同的要求。至于我的解决方案，我已经建议丹尼尔看看另一个问题。我试图提供帮助，而不是为了好玩而击落你:)

【解决方案2】：

你可以这样做假设您从数据库中获得的 html 是 div 并且有 id main。现在，当您检索 div 时，解析它以将每个 img 标记替换为 div 类 sub。就在 div main 结束之后，放置一个像这样的 script 元素

<div id="main">
...
...
</div>
<script type=text/javascript ....>  // or use the src attribute to import a js file
....
...
..
</script>

现在在 script 元素中写入 ajax 调用以请求图像，并在接收到每个图像时将该图像放入 div 类 sub

【讨论】：

【解决方案3】：

执行此操作的非 javscript 方法是在任何地方使用标签，而不是然后添加一个 css 文件，该文件将为所有那些是图像的 s 设置背景图像。因此没有js，延迟加载。

<body>
  <div id="image1"></div>
  <div id="image2"></div>
  .
  .
  .
  .
</body>
<link href="image.css" type="text/css"></link>

在 css 中你可以这样做：

#image1 { width: 100px; height: 100px; background: url(image1.jpg) }
#image2 { width: 100px; height: 100px; background: url(image2.jpg) }

这将执行您正在寻找的延迟加载。

【讨论】：