برمجة دوت كوم : إصنع مستقبلك



طريقة عمل lazy load images بكل سهولة

نشر في : 2019-08-02




بسم الله الرحمن الرحيم

أولاً نقوم بإستدعاء مكتبة ال JQuery

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
    </script>

وبعدها نقوم بإستدعاء هذه المكتبة الي تعمل بواسطة ال jQuery

وهذا كود ال CDN

 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugi
ns.min.js"></script>

ولتشغيل المكتبة نقوم بوضع هذا الكود بأسفل الصفحة

   $(function() {  $('.lazy').Lazy();    });

ولتفعيل ال lazy load على الصورة نقوم بوضع class باسم lazy

    <img class="lazy" />

ونقوم بوضع مسار الصورة بإسم data-src وليس src

    <img class="lazy" data-src="images/1.jpg" />

ولوضع صورة تحميل حتى تقوم الصورة بالتحميل نقوم بوضها داخل ال src

<img class="lazy" data-src="images/1.jpg" src="loading.gif"/>

وهذا كود الصفحة كاملة :

<!DOCTYPE html>
<html>
  <head>
    <title>Lazy Load By Brmja.com</title>


    <style type="text/css">
        
        img.lazy {
            width: 700px; 
            height: 467px; 
            display: block;
        }


    </style>
  </head>
  <body>
    
    <img class="lazy" src="https://i.brmja.com/lazy.gif" data-src="https://i.brmja.com/img.jpg" />


    <p>By <a href="https://brmja.com" target="_blank">Brmja.com</a></p>


    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js">
    </script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js">


    </script>
    <script type="text/javascript">
      $(function() {
        $('.lazy').Lazy();
      }
       );
    </script>
  </body>
</html>