有没有办法使用 Lazy Load 插件在图像周围添加边框？

Question

我正在使用这个插件来延迟加载图像。

http://jquery.eisbehr.de/lazy

它能很好地加载我的 80 张图片。这是代码。

<!DOCTYPE html>
<html>
<head>
<title>Lazy Load</title>
<script src="jquery/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="jquery.lazy/jquery.lazy.min.js"></script>
<style>
.border {
border: 5px solid red;
}
</style>

</head>
<body>

<script>    
$(function() {
    $('.lazy').lazy({
      effect: "fadeIn",
      effectTime: 2000,
      threshold: 0
    });
});
</script>

<img class="lazy border" data-src="images/1.jpg" />
<img class="lazy border" data-src="images/80.jpg" />
</body>
</html>

我尝试在每张图片周围添加边框，但该边框加载效果不如图片。有人可以告诉我如何向图像添加元素 (div、css)，以便它们加载时像只有图像一样流畅吗？

Answer 1

我刚刚弄明白并想分享我的解决方案。我正在使用 afterLoad 添加边框。

<script>    
$(function() {
    $('.lazy').lazy({
      effect: "fadeIn",
      effectTime: 2000,
      threshold: 0,
      afterLoad: function(element) {                   
            element.css('border', '10px solid chartreuse');                  
        }
    });
});
</script>

有没有办法使用 Lazy Load 插件在图像周围添加边框？

Is there a way to get a border around image with Lazy Load plugin?

lazy-loading