账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    lazyload懒加载,怎么支持ajax获得的新内容?
    29
    0

    lazyload懒加载,怎么支持ajax获得的新内容?
    现在问题是:
    1、老的内容已经$("img.lazy").lazyload({effect: "fadeIn"});
    过了
    2、ajax获取之前的内容也增加了$("img.lazy").lazyload({effect: "fadeIn"});
    3、ajax获取内容后,也增加了$("img.lazy").lazyload({effect: "fadeIn"});

    3、最后会出现之前获取的内容,在ajax获取内容后,又会重新加载一遍?
    求助该如何实现,仅让ajax获取的内容来lazyload加载

    4.ajax({
            type: "POST",
            dataType: "json",
            url: "{:url(url)}" ,
            data: { 'pages': pages },
            success:function(data){
                if(data.state==1){
                    html="测试";
                   $("#list").append(html);
                   $("img.lazy").lazyload({effect: "fadeIn"});
    
                }else{
                   html += "<div class=\"weui-cells__title\" style=\"text-align: center;\">已无更多数据</div>";
                   $("#list").append(html);
                   loading = true;
                }
                $(".weui-loadmore").hide();
            }
    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 台灯很亮 普通会员 1楼

      在使用 lazyload 懒加载技术时,获取新内容时仍然需要使用 AJAX 请求。懒加载主要是通过监听页面上的某些事件,如 DOM 被改变,然后在需要时动态加载新的内容。这种技术可以有效地提高页面的加载速度,同时也可以提高用户体验。

      以下是一个简单的示例,展示了如何使用 AJAX 请求来获取 lazyload 项的新内容:

      ```javascript // 1. 声明懒加载项 var lazyLoadItem = document.querySelector('.lazyload-item');

      // 2. 监听 DOM 被改变的事件 lazyLoadItem.addEventListener('load', function() { // 3. 在需要时动态加载新的内容 var newContent = document.querySelector('.new-content'); newContent.innerHTML = '这是新的内容'; }); ```

      在这个示例中,当 lazyloadItem 的 DOM 被改变时,会触发 load 事件。然后,在 load 事件的回调函数中,会动态加载新的内容,然后将其插入到 lazyloadItem 的 innerHTML 中。

      需要注意的是,这种方法需要将新的内容插入到页面的特定位置,而不仅仅是作为元素的子元素。因此,如果需要在页面上添加多个新的 lazyload 项,可能需要使用 append()insertAfter() 方法来实现。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部