Question

我有一个网页，其中显示了推荐列表以及每个条目旁边的<img>标记。

看起来像这样：

<table> 
 <tr>
  <th>
  Name
  </th>
  <th>
  Testimonial
  </th>
  <th>
  Subject
  </th>
 </tr>

 <tr>
  <td>
  Joe Blow
  </td>
  <td>
  I had a great stay...
  </td>
  <td>
   <img src="..." />
  </td>
 </tr>
...
</table>

基本上这可以同时提供多达100个条目并且它经常冻结浏览器 - 特别是因为我可能还没有完全优化所有imgae文件大小，其中一些超过1MB。

我想知道的是我是如何做到这一点的，因此<img>标记在最终用户滚动并且在视口中变得可见之前不会呈现到浏览器中。

这样可以节省我服务器上的大量费用，也不会冻结我所有用户的浏览器。

有人有什么想法吗？

Answer 1

您可以将事件绑定到在视口中显示时触发的img标记。您可以使用此解决方案执行此操作：jquery trigger function when element is in viewport

因此，当事件被触发时，您只需使用.setAttribute来设置img标记的src属性。

Answer 2

你想要实现的是Lazy Loading，我相信互联网上有几个工具或js库。

现在，由于这个功能的缺点，我会说在移动电话上，互联网并不快，起初用户可能会在查看图片时出现问题，因为他们将会下载。

但这取决于你。

希望这有帮助。

链接：

Lazy Loading css-tricks.com

jQuery Unveil

jQuery Lazy Load

仅呈现当前可见的页面上的内容

2 个答案: