当我无法修改某些源代码时，如何控制图像加载？

我正在使用一系列插件输出某些标记的模板系统中工作。其中一个插件是包含多个图像的图库。随着图库尺寸的增加，加载速度受到影响，我正试图想出一个创造性的方法来解决它。当我无法修改某些源代码时，如何控制图像加载？

下面是一个例子：
{% plugin gallery %}

将变为：

<div id="gallery"> 
    <img src="sample.png" alt="Sample Image"> 
    <img src="sample.png" alt="Sample Image"> 
    <img src="sample.png" alt="Sample Image"> 
    <img src="sample.png" alt="Sample Image"> 
    <img src="sample.png" alt="Sample Image"> 
</div>

我不能控制就是BEING输出的内容，只有额外的HTML包裹。这显然导致了5个图像被加载

一种技术来加载图像，当你想要他们是给他们一个假的属性，然后当你想加载（例如），然后变成src但我不能编辑该输出。

我的另一个想法是用一些东西来包装所有输出，以防止加载，比如HTML注释，然后剥离/使用一些JavaScript数据来根据需要重建图像元素并将它们附加回DOM 。这看起来很不舒服，而且我没有想法。

摘要：

我想阻止加载图片，所以我可以加载它们，因为我希望他们和控制页面加载好。
我无法编辑图像标记的标记，但可以附加标记。
我受限于客户端语言（HTML/JS）。在这种情况下，我不能使用服务器端语言或修改服务器本身。

任何其他技术可以在这里工作？

来源

2013-04-22 Anders H

如果您在说您无法更改HTML内容中的<img>标签，那么您就被卡住了。没有什么你可以用JavaScript或HTML做的事情会阻止它们加载，然后允许你在加载时进行控制。

JavaScript不能在DOM上操作，直到图像已经开始加载后，它们将在您使用javascript获得控件时已经加载。

在某些浏览器中打包HTML注释可能会有问题，因为我读过并非所有浏览器都保留注释内的内容。

使用CSS规则（display: none或visibility: hidden）呈现图像不可见的各种方法不会阻止它们加载。

来源

2013-04-22 17:04:27 jfriend00

呀，这可能只是答案，但我很乐观，有可能是一个创造性的解决方案在那里，例如别的东西，我可以用评论以外的其他东西包装它。 – 2013-04-22 17:18:32

~~将它包装在code块中，并用Javascript解析出来。你有这样的想法，但这不会因jfriend00的答案中提到的问题而受到影响。注释。~~

基本上是的，你必须做一些hacky，因为非hacky的东西是接收更少的img s。

服务器是否支持分页或最大请求大小？
模板系统是否支持最大请求？或者基本形式的逻辑if(num > MAX) return;？

来源

2013-04-22 17:15:26 djechlin

不幸的是，它似乎仍然在这种情况下加载：http://jsfiddle.net/andershaig/YY7wh/1/ – 2013-04-22 17:16:47

@AndersH做我的编辑说任何有用的？ – djechlin 2013-04-22 17:25:21

我可以限制返回的图像数量，但内容会解析一次。我没有任何机会只获取前5张图片，然后再渲染5张图片，解析/渲染步骤仅在页面加载时发生一次，然后这就是我坚持使用的标记。这可能只是一个有其他选择的环境。 – 2013-04-22 17:26:33

当我无法修改某些源代码时，如何控制图像加载？

回答

相关问题