仅在焦点/目标上加载图像

Question

我有大约300多张图片，每张50-100kb。服务器花了很多时间在页面加载时加载所有图像。如何在Google图书上加载图片？

Answer 1

它被称为“延迟加载”。 Lazy Loading Of Images – Resources You Need 展示了如何使用最流行的JS框架来实现这一点。

例如，在jQuery中，您可以使用Lazy load plugin：

执行此操作

HTML：

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
...
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"
     width="640" heigh="480">

JS：

$("img.lazy").lazyload();