使用ajax后，lazyload.js失效怎么办-PHP Tutorial-php.cn

使用ajax后，lazyload.js失效怎么办

PHP中文网

Release： 2023-02-28 11:56:02

Original

2035 people have browsed it

使用ajax后，lazyload.js失效的解决办法：首先在ajax回调的时候初始化一次“lazyload”；然后在每次ajax后都重新执行一下初始化代码即可。

使用ajax后，lazyload.js失效怎么办

使用ajax后，lazyload.js失效怎么办？

是这样的，我的网站主要以图片为主，所以引用了lazyload.js和infinitescroll.js利于体验，infinitescroll.js是应用了ajax的，就是当网页下滚动的时候自动加载下一页的内容。

问题就来了，ajax加载的下一页的图片lazyload.js失效了，图片显示不出来，还有一些js也没有效果了。

我百度了好久说是要绑定事件，比如滑动显示的或点击显示的可以用：

$(&#39;body&#39;).on(&#39;mouseover&#39; , &#39;.myDrop&#39; ,
        function() {
          $(this).addClass(&#39;open&#39;);
        }
    );

Copy after login

这样绑定，但是lazyload.js的配置是当载入页面就执行，我应该怎么办呀？
下面的是lazyload.js的配置：

$(function() {
    $("img.img-responsive").lazyload({
      effect : "fadeIn",
      threshold : 200
    });
  });

Copy after login

解决办法：

1.如果非要做的话，ajax回调的时候再初始化一次lazyload呗

2.可以在每次ajax后都重新执行一下你的初始化代码，这样应该就可以了

$.ajax({
   type: "POST",
   url: "XXX",
   data: "XXXX",
   success: function(msg){
     $("img.img-responsive").lazyload({
      effect : "fadeIn",
      threshold : 200
    });
   }
});

Copy after login

更多相关知识，请访问PHP中文网！

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

使用ajax后，lazyload.js失效怎么办