بارگذاری تصاویر با تاخیر Lazy Load با JavaScript

بارگذاری تصاویر با تاخیر Lazy Load با JavaScript

بارگذاری تصاویر با تاخیر Lazy Load – یکی از روش هایی که تاثیر زیادی بر افزایش سرعت بارگذاری سایت دارد همین Lazy Loading تصاویر است .

در این آموزش با کمک کتابخانه Lozad تصاویر را طوری تنظیم می کنیم که پس از بارگذاری صفحه وب نمایش داده شوند و در نتیجه سرعت لود صفحه افزایش پیدا خواهد کرد .


ساختار HTML برای کتابخانه Lozad

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>


    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>

        <img class="img-media lozad" data-placeholder-background="orange" data-src="http://files.rapidcode.ir/pictures/car (1).jpg" alt="Car">
        <img class="img-media lozad" data-placeholder-background="orange" data-src="http://files.rapidcode.ir/pictures/car (2).jpg" alt="Car">
        <img class="img-media lozad" data-placeholder-background="orange" data-src="http://files.rapidcode.ir/pictures/car (3).jpg" alt="Car">
        <img class="img-media lozad" data-placeholder-background="orange" data-src="http://files.rapidcode.ir/pictures/car (4).jpg" alt="Car">
        <img class="img-media lozad" data-placeholder-background="orange" data-src="http://files.rapidcode.ir/pictures/car (5).jpg" alt="Car">
        <img class="img-media lozad" data-placeholder-background="orange" data-src="http://files.rapidcode.ir/pictures/car (6).jpg" alt="Car">
        <img class="img-media lozad" data-placeholder-background="orange" data-src="http://files.rapidcode.ir/pictures/car (7).jpg" alt="Car">
        <img class="img-media lozad" data-placeholder-background="orange" data-src="http://files.rapidcode.ir/pictures/car (8).jpg" alt="Car">
        

       
    </div>

    
    <script src="static/js/lib/lozad.min.js"></script>
    <script src="static/js/app.js"></script>
</body>
</html>


یک استایل برای نمایش کوچک تر تصاویر

.img-media{
    width: 500px;
}


فایل app.js تنظیم Lozad

const observer = lozad(".img-media" , {
    threshold: 0.9,
    enableAutoReload: true,
    loaded : function(element){
        console.log("تصویر دیگری بارگذاری شد");
    }
});
observer.observe();

console.log("بارگذاری کامل شد !");


خروجی Lazy Load تصاویر ( نتیجه )

دانلود برنامه Lazy Loading تصاویر

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

انجام انواع پروژه های وب


( فروشگاهی ، خبری ، رزرواسیون ، وردپرس ، حل مشکلات وردپرسی )

شماره تماس و واتساپ : 09398554859