Question

在我们的应用程序中，我们将HTML存储在db表中并在某个时刻将其呈现给用户，HTML中可以包含相当多的图像（大小可能很大），我希望我们在从数据库中检索HTML时预先解析HTML，并将任何图像标记替换为允许我们在其余数据呈现给客户端后加载图像的内容。

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

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

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

Answer 1

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

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

然后，当您的网页加载时，添加一个javascript行，这样做（未经测试，但您明白了）：

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

Answer 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

Answer 3

非javscript方法是在任何地方使用标签代替，然后添加一个css文件，将背景图像设置为所有图像。因此没有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) }

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