javascript - 轮播 slider 首先加载，但图像需要一些时间才能加载

Question

我正在使用 Bootstrap 在我的网站中使用轮播 slider 。

问题:

当我打开我的网页时，标题部分中的 slider 首先加载，但第一张图像需要一些时间才能加载到 slider 上。我想解决我的问题。

我想要什么:

我希望如果加载 slider ，则必须同时加载图像，否则如果加载图像需要时间，则应在准备好在网页上加载图像时加载 slider 。

请建议我应该做什么。

Answer 1

如果您的 slider 包含超过 10 张图片并且图片尺寸较大，请按照以下步骤操作，

1. 仅将 src 应用于 slider 的前 3 个图像。对于 rest 图像，将图像 url 应用于新属性“delayedsrc”。 delayedsrc 属性包含您的图像 url。还将类“defered_loading”应用于这些图像。

然后添加这段js代码，

$('.defered_loading').each(function() {
                $(this).attr('src', $(this).attr('delayedsrc'));
            }).promise().done(function() {
                // intialize your slider here
            });