我如何推迟加载某些图像，以便页面加载更快？

Question

此page非常重要，因此需要花费大量时间才能加载。

我想知道如何推迟使用这些类加载div中的所有内容

<div class="image_holder">
    <img class="image" src="images/5pointz_cans.jpg" alt="Whitewashed: Destroying The Graffiti Mecca">
    <div class="caption2"> 
        <p>Abandoned spray cans at 5Pointz. </p>
    </div>
</div>

和

<div class="before_after_slider">
    <div class="photo">
        <div class="after">
            <img src="center_before.jpg" width="1000px" height="600px"  alt="after" />
        </div>
        <div class="before">
            <img src="center_after.jpg" width="1000px" height="600px" alt="before" />
        </div>
    </div>
</div>
<div class="caption">
    <p>Roll over the photo with your cursor to see the before/after images. </p>
</div>

然后在其他所有内容都加载后启动，开始加载这些div中的所有内容。

Answer 1

您可以使用jQuery插件推迟图像加载，但您可以考虑以下一些选项：

使用浏览器缓存

您可以加快将来下载缓存图像并对。htaccess文件进行微调：

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

压缩/缩放图像

此时无需添加任何内容。 ：）

创建CSS精灵

使用像Spriteme这样的东西。

Lazy load

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
...
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
...
$(function() {
    $("img.lazy").lazyload();
});

推迟javascript加载

您可以使用defer属性来延迟加载外部javascript文件：

<script src="demo_defer.js" defer></script>