Question

概述

所以基本上我有一个旋转木马，我使用来自JSON文件的URL填充图像。我遍历此JSON文件并将每个URL设置为图像的data-src属性，并将其设置为Owl Carousel中的延迟加载。但是，我不知道提供给我的URL是什么，也不知道它们是否坏了。这些是相当高分辨率的图像，所以我理想情况下不会多次加载它们而不是一次加载它们。

问题

然而，当我在请求链接时偶尔遇到损坏的图像链接时会出现问题。在将图像放入旋转木马之前我没有加载图像，所以我真的没有办法检查图像是否有效。 我试图找到一种方法在图像延迟加载之前删除损坏的图像，而不会导致很长的加载时间或轮播中的任何异常移动。

我尝试了什么

在加载元素之前加载图像。这会导致负载时间显着增加，如果不必要，我希望避免这种情况。

使用.onerror删除图片，但图片已损坏。这很快，但在旋转木马的运动中引起奇怪的错误。此外，如果我希望它完全可靠，我必须跳回到之前的幻灯片，然后再次向前跳。例如：

$('img.owl-lazy').on("error", function () {
    var carouselData = carousel.data('owl.carousel');
    var index = $(this).parent().index();

    carousel.trigger('remove.owl.carousel', carouselData.relative(index))
        .trigger('refresh.owl.carousel')
        .trigger('prev.owl.carousel')
        .trigger('next.owl.carousel');
});

这最终会创建奇怪的动画效果，看起来它向后移动以进入下一张幻灯片。

在每张图片中加载并在它们到达时将它们添加到轮播中。这似乎加快了图像的加载速度，但最终在图像中创建了一个堆叠效果，直到它们全部被加载，然后将它们正确放入旋转木马。
只需使用.remove()删除与该幻灯片关联的元素即可。最终导致旋转木马导致奇怪的导航问题。

如果有人有任何他们推荐的策略，我会非常感谢这些建议。此外，如果您需要更多代码，我很乐意将其包含在内。

编辑1：示例

Here是一个Codepen，举例说明了我遇到的问题。（我用一堆鸭子图片替换了我的标准ajax调用，所以在标准场景中我不知道提前提供的URL。）另外，请注意旋转木马加载3或4个图像朝向开头。旋转木马提供一点缓冲。此初始缓冲区中可能包含断开链接的图像以及最终结束。

在延迟加载期间从猫头鹰轮播中移除图像

0 个答案: