css加载后但在下载图像之前运行代码

Question

我有一个网站，面临的问题是

图片需要一段时间才能下载，在我的系统上下载整个网站大约需要20秒。它们是一个显示的加载器，它隐藏在window.load事件上，即完整的网站加载时（20秒）。

如果我在document.ready事件中隐藏加载程序，网站会快速显示，对用户有益。但这里的问题是，某些内容在没有应用CSS的情况下显示大约2秒，看起来很奇怪。

我正在寻找一种方法来在css加载时隐藏加载器，而图像不是。

Answer 1

我过去做过的可能对您有用的事情就是将图片src换成data-src，如下所示：

<img src="" data-src="your-image.jpg" alt="some alt description">

然后你需要做的就是添加一些循环在DOM上的JavaScript，交换src的data-src：

jQuery(document).ready(function($){
    $('img').each(function(){
        $(this).attr('src') = $(this).data('src');
    });
});

此技术的优点是您的网页将在加载所有图像之前呈现CSS。这也意味着页面加载速度非常快。 潜在的缺点是这对图像搜索引擎优化（Google或Bing图像）不利