js懒加载的应用

1. 给所有img标签加上 lass="lazyload" data-src="真实地址" src="可以不填写"

 <img class="lazyload" data-src="{% static 'image/background_img/425df94c8200a73383cd40212d7f7a2.jpg' %}" src="" alt="">

2.引入 lazyload.js

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js"></script>

3.在script标签中写入以下js代码

 window.onload=function(){
                lazyload();
            }

// IE浏览器不支持懒加载

    var userAgent = window.navigator.userAgent;
   if(userAgent.indexOf('NET') != -1) {
//如果是IE浏览器则让data-src的值等于src
       $('img').each(function () {
           var data_src = $(this).attr('data-src');
           if(data_src){
               $(this).attr('src', data_src)
           }

       })
   }else{

        window.onload=function(){
                lazyload();
            }
   }