بارگذاری تصاویر با تاخیر 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("بارگذاری کامل شد !");
ارسال نظر