我正在使用此插件进行图像的延迟加载。
它很好地加载了我的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），以便它们像仅图像一样平滑地加载吗？
我只是想通了，想分享我的解决方案。我正在使用afterLoad添加边框。
<script>
$(function() {
$('.lazy').lazy({
effect: "fadeIn",
effectTime: 2000,
threshold: 0,
afterLoad: function(element) {
element.css('border', '10px solid chartreuse');
}
});
});
</script>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句