Heim > Backend-Entwicklung > PHP-Tutorial > 使用ajax后,lazyload.js失效怎么办

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

PHP中文网
Freigeben: 2023-02-28 11:56:02
Original
2105 Leute haben es durchsucht

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

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

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

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

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

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

$('body').on('mouseover' , '.myDrop' ,
        function() {
          $(this).addClass('open');
        }
    );
Nach dem Login kopieren

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

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

解决办法:

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

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

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

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage