Question

我有一个带CSS灯箱的图片库。目前，图片库是带有lazyload的砌体。由于灯箱是一个CSS，因此一开始所有图片都已加载。因此，我也想对其施加强制延迟。因此，我仅在图像被使用时才尝试强制延迟加载（在砌体布局中单击图像）。在使此功能正常运行之后，可以在灯箱中的上一个和下一个图标上设置相同类型的链接。

但这是问题所在。它仅在我第一次单击图像时起作用。图像无关紧要，但只能工作一次：（

我尝试了几种方法，但似乎都没有效果。

但是问题仍然存在。

JavaScript jquery

$(function() {
    $("#image-link").on('click', function() {
        var counter = $(this).data('target');
        $('.lazybox-' + counter).lazy();
    });
});

Html =计数器将强制延迟加载特定图像

<a id="image-link" href="#<?php echo $id; ?>" data-target="<?php echo $counter; ?>">
   <img class="lazy" src=/images/placeholder" data-src="<?php echo base_url($imageLocation); ?>" alt="<?php echo $selected_gallery . ' ' . $counter; ?>">
</a>

我希望能够再使用一次javascript函数。如果可以的话，请尽可能解释一下为什么会发生这样的原因，以便我学习。

Answer 1

好吧，我真的很傻。但是解决方案非常简单。

不要使用ID＃image-link，而要使用CLASS .image-link

点击事件仅适用一次

1 个答案: