網頁延遲載入圖片

. . . .
.

  1. 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>
  1. set class 這裡我目前還是把 src 帶入窄入的動畫,因為沒有的話會出現一個錯誤的符號會很不美觀
<img class="lazy " width="auto" height="210" data-original="https://picsum.photos/280/210"></img>
  1. 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>


Tags: Web design