-1

我有一个页面，其中有一个包含 100 多张图像的幻灯片（bxslider），当我第一次访问该页面时，加载时间超过 10 秒，即使在页面显示后我也看不到任何图像。只有在我重新加载页面后，滑块才开始工作。我已将所有图像的大小重新调整为完全正确的尺寸（如 Google PageSpeed Insight 所建议的那样），但第一次加载时间仍然太长。我也尝试过使用 Galleria 插件，但没有成功。延迟加载在这里没有帮助，因为图像是滑块的一部分并且不会同时显示，我已经尝试过了。

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

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

任何帮助表示赞赏。谢谢

4

2 回答 2

0

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

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

如果您有 100 张图片，并且想要获得更好的用户体验，您还应该预加载一些用户将要滑动到的下一张图片。

$('.next, . prev').on('click', function(){
 $('.slider .visible-images').attr('src', function(){
  return $(this).data('src');
 });
});
于 2013-09-17T11:04:10.303 回答
0

What you should do in this case, is loading the first 2 or 3 images of the slide (so you can move to the next or previous slide in a fast way) and then load dynamically the rest of images as you move the next or previous slide. (this still being a kind of lazy load, not based on the scrolling, but on the active slide)

You have to detect in which slide you are and load the next/prev or next/prev 2 ones accordingly.

This way the site will load fast (as you will only need to load 3 images) and the rest will load only when needed.

Nobody loads 100 images at once. That's just insane, not only for users, but for SEO purposes as well as for the data transfer.

于 2013-09-17T10:57:06.710 回答