jquery插件显示图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 图片懒加载示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        img {
            width: 300px;
            height: 200px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <img data-src="image1.jpg" alt="Image 1">
    <img data-src="image2.jpg" alt="Image 2">
    <img data-src="image3.jpg" alt="Image 3">
    <!-- 更多图片 -->

    <script>
        (function($) {
            $.fn.lazyload = function() {
                var $images = this.filter('img[data-src]');
                $images.each(function() {
                    var $img = $(this);
                    $img.attr('src', $img.attr('data-src'));
                    $img.removeAttr('data-src');
                });
            };
        })(jQuery);

        $(document).ready(function() {
            $('img').lazyload();
        });
    </script>
</body>
</html>