2

I'm working in a templating system that uses a series of plugins to output some markup. One of these plugins is a gallery that contains multiple images. As the gallery sizes grow, load speed gets impacted and I'm trying to come up with a creative approach to work around it.

Here's an example:
{% plugin gallery %}

will become:

<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>

I can't control the content that's being output, only wrap it with additional HTML. This obviously results in 5 images being loaded

One technique to load images when you want them is to give them a fake attribute that you then turn into src when you want to load (e.g. ) but I can't edit that output.

Another idea I had was wrapping all the output with something to prevent load, like an HTML comment, and then stripping that off / using the data with some JavaScript to reconstruct the image elements as needed and append them back to the DOM. This seems hacky and I'm out of ideas.

Summary:

  • I want to prevent images from loading so I can load them as I want them and control page load better.
  • I cannot edit the markup of the image tags, but can wrap with additional markup.
  • I'm constrained to client-side languages (HTML/JS). I cannot use server-side languages or modify the server itself in this situation.

Any other techniques that may work here?

4

2 回答 2

2

如果您说您无法更改<img>HTML 内容中的标签，那么您就被卡住了。你不能用 javascript 或 HTML 做任何事情都不会阻止它们加载，然后允许你控制它们何时加载。

在图像已经开始加载之前，Javascript 无法在 DOM 上运行，因此当您使用 javascript 进行控制时，它们已经在加载。

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

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

于 2013-04-22T17:04:27.050 回答
1

将其包装在一个code块中并用 Javascript 将其解析出来。您已经想到了这一点，但这不会受到 jfriend00 的回答中提到的问题的影响。注释。

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

  • 服务器是否支持分页或最大请求大小？
  • 模板系统是否支持最大请求？还是基本形式的逻辑if(num > MAX) return;？
于 2013-04-22T17:15:26.153 回答