網頁延遲載入圖片

load js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js" integrity="sha512-jNDtFf7qgU0eH/+Z42FG4fw3w7DM/9zbgNPe3wfJlCylVDTT3IgKW5r92Vy9IHa6U50vyMz5gRByIu4YIXFtaQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

set class 這裡我目前還是把 src 帶入窄入的動畫，因為沒有的話會出現一個錯誤的符號會很不美觀

<img class="lazy " width="auto" height="210" data-original="https://picsum.photos/280/210"></img>

main js

<script>
    $(function() {
        $("img.lazy").lazyload({
            threshold :1,
            placeholder: "https://cdn.jsdelivr.net/gh/shw2018/[email protected]/sakura/img/loader/orange.progress-bar-stripe-loader.svg",
            effects:"fadeIn"
        });
    })
</script>