Question

我有一个页面，我有一个幻灯片（bxslider）有100多张图片，第一次访问页面加载时间超过10秒，甚至在页面显示后我看不到任何图像。只有在我重新加载页面后，滑块才开始工作。我已经将所有图像重新调整为正确的尺寸（由PageSpeed Insight by Google建议）但第一次加载时间仍然太长。我也试过插件Galleria，但没有运气。延迟加载在这里没有帮助，因为图像是滑块的一部分并且不会同时显示，我已经尝试过。

所以我的问题是，如果有一种方法只在我舔下一个/上一个按钮时加载图像，而不是在页面加载时将它们全部加载。

我想提一下，在bxslider设置中，选项preloadImages设置为visible，但这仍然不会改变加载时间。

感谢任何帮助。谢谢

Answer 1

在这种情况下，你应该做的是加载幻灯片的前2或3张图像（这样你可以快速移动到下一张或上一张幻灯片），然后在移动时动态加载剩下的图像下一张或上一张幻灯片（这仍然是一种懒惰的负载，不是基于滚动，而是基于活动幻灯片）

您必须检测自己的幻灯片，并相应地加载下一个/上一个或下一个/上一个2。

通过这种方式，网站将加载速度快（因为您只需要加载3张图片），其余的只会在需要时加载。

没有人一次加载100张图片。这只是疯狂，不仅对用户而言，对于搜索引擎优化以及数据传输。

Answer 2

你需要延迟加载它们，而不是寻找可见图像的传统延迟加载方式，取决于用户与滑块的交互。

而不是使用src attr加载图像，而是将其替换为data-src，然后单击下一个或上一个将data-src替换回src，显示在您现在显示的图像上。

如果您有100张图片，并且想要获得更好的ux，那么您还应该预先加载用户要下载的下一张图片。

$('.next, . prev').on('click', function(){
 $('.slider .visible-images').attr('src', function(){
  return $(this).data('src');
 });
});

加载100张图片的页面

2 个答案: