imagesLoaded 方法不适用于 JQuery 砌体和无限滚动

2024-04-17

我一直在使用 JQuery masonry,现在我正在添加无限滚动。几乎每个砖石“砖块”中都有图像,在我使用无限滚动之前,图像加载得很好,一切都很棒。我为无限滚动添加了 javascript 的下一部分,并在内部添加了 imagesLoaded 方法,但是当附加新砖块时,它们全部堆在顶部。我的假设是我没有在无限滚动回调中正确添加 imagesLoaded 方法,但我无法找到我的错误。这是代码

<script type="text/javascript">
    $(function(){
        var $container = $('#container');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector : '.tile',
            columnWidth : 240
          });
        });


    var $container = $('#container');
    $container.infinitescroll({
        navSelector  : ".flickr_pagination",            
                       // selector for the paged navigation (it will be hidden)
        nextSelector : "a.next_page",    
                       // selector for the NEXT link (to page 2)
        itemSelector : "div.tile"          
                       // selector for all items you'll retrieve
      },
      // trigger Masonry as a callback
      function( newElements ) {
        var $newElems = $( newElements );

        $container.imagesLoaded(function() {
            masonry( 'appended', $newElems );
        });
      }
    );
    });
</script>

第一个 JQuery 砌体调用工作正常并且尚未被触及。这是第二部分,似乎有问题。感谢您的帮助,如果您需要更多信息,请告诉我。


答案如下

$(function(){

        var $container = $('#container');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector : '.tile',
            columnWidth : 240
          });
        });

    $container.infinitescroll({
          navSelector  : '.flickr_pagination',    // selector for the paged navigation 
          nextSelector : 'a.next_page',  // selector for the NEXT link (to page 2)
          itemSelector : '.tile',     // selector for all items you'll retrieve
          loading: {
              finishedMsg: 'No more pages to load.',
              img: 'http://i.imgur.com/6RMhx.gif'
            }
          },
          // trigger Masonry as a callback
          function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
              // show elems now they're ready
              $newElems.animate({ opacity: 1 });
              $container.masonry( 'appended', $newElems, true ); 
            });
          }
        );
    });

问题是我在无限滚动回调函数中对 $container 调用 .imagesLoaded() ,而我应该在 $newElements 上调用它。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

imagesLoaded 方法不适用于 JQuery 砌体和无限滚动 的相关文章

  • 尝试使用 PHP GD 以固定宽度/高度生成按比例裁剪的缩略图

    我正在尝试使用 GD 在 PHP 中创建一个缩略图生成器 它将获取图像并将其缩小到固定的宽度 高度 它从原始图像中获取的正方形 基于我的固定宽度 高度 将来自图像的中心 以给出比例正确的缩略图 我将尝试用一些漂亮的 ASCII 来演示这个令
  • 继续使用 sketch.js 编辑草图图像 [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我正在使用 sketch js 中的示例 http intridea github io sketch js http intridea g
  • 在 Android 中将图像从可绘制图像转换为字节数组

    由于我要将图像发送到 Parse com 因此我必须将其转换为字节数组 我的第一种方法是从图库中选择图像并将其转换为字节数组 如下所示 Override protected void onActivityResult int request
  • 如何使用 IO Codenameone 发布图片/图像

    因为 codenameone 不能使用外部库 HttpConnection 所以我必须使用 Codenameone 提供的内部库 API 只是我已经设法使用 ConnectionRequest 将数据发布到格式化文本 字符串 我想知道是否有
  • 通过 wp_handle_upload 删除未放入上传文件夹中的图像

    我正在将图像保存到上传文件夹 但我正在使用文件放置内容 http php net manual en function file put contents php代替wp 句柄 上传 https codex wordpress org Fu
  • Google Apps 脚本:如何水平对齐 inlineImage

    我有以下代码 它是一个更大程序的一部分 我正在尝试将图像从我的 Google 驱动器插入到 Google 文档中 并调整其大小并居中 到目前为止 我能够让程序插入图像并调整其大小 但我不知道如何使 inlineImage 居中 我是使用谷歌
  • PHP cURL 代理带标头?

    我正在制作一个 PHP 图像代理脚本 我需要它不仅能够回显其请求的图像的内容 而且还能够以相同的方式重现图像请求的标头 我见过一个 另一个 但没有同时看到过 这些 cURL 选项让我感到困惑 我该怎么做 抱歉 我不确定你想要什么 这是从图像
  • Tiff 的 getImageWritersByFormatName 中存在问题。获取图像作家

    我正在尝试将 PDF 转换为 tiff 图像 我使用以下代码按格式获取图像编写器 Iterator
  • 如何在Android中没有Intent且没有任何视图窗口的情况下拍照

    大家好 我正在尝试弄清楚如何通过按下按钮来拍照 而不显示任何预览 我的想法是 我想要拍摄并保存照片 但之前或之后没有照片的视觉预览 到目前为止 我能够获取拍照并将其保存到磁盘的代码 没有任何问题 但如果没有表面视图或预览 我似乎无法做到这一
  • 有没有办法在 asp 图像控件上显示动态生成的位图?

    在我的代码中 我使用 C 和 ASP NET 动态创建位图 我需要将其显示在 asp 图像控件上 无论如何 有没有办法在不使用处理程序的情况下做到这一点 使用 ashx 处理程序更好 因为它适用于所有浏览器 并且您可以在客户端上缓存输出图像
  • 使用 Javascript 旋转图像

    首先 我目前正在使用 JQuery 因此 JQuery 解决方案可行 我想将图像旋转动态 X 度 每秒计算一次 现在我用这个完美地工作了Jquery旋转插件 http code google com p jqueryrotate 图像每秒完
  • HTTP 重定向图像可以吗?

    返回图片资源时返回301 302 303代码可以吗 我过去曾这样做过 而且似乎有效 这是好的做法吗 它与大多数浏览器兼容吗 是的 您可以重定向图像 浏览器将遵循重定向 但出于性能原因 您通常希望将重定向保持在最低限度 因为每个重定向都需要单
  • 自下而上的砌体堆叠

    我想从下往上堆叠我的砌体砖 这个问题之前已经回答过 但是 Masonry 的修改和分支现在使用了非常旧的脚本版本 新版本的 Masonry 修复了我需要的错误 那么有谁知道如何将旧的解决方案应用到新的脚本中 这是旧的解决方案 https s
  • 如何在android中使用parse api在parse服务器中上传图像

    我想在android中的解析云服务器中上传图像 但我无法这样做 我尝试过以下代码 Drawable drawable getResources getDrawable R drawable profilepic Bitmap bitmap
  • 动态显示数百张图像

    我必须创建一个能够显示电影院大厅 不知道确切的词 模式的表单 本质上 我必须显示大量 由另一个来源提供 独立的椅子状图像 这些图像可以在单击时改变颜色 状态 我上网寻找解决方案 但我真的不知道如何管理这个问题 有人能帮我吗 如果您需要绘制那
  • 使用 OpenCV 和 Python 叠加两个图像而不丢失颜色强度

    如何叠加两个图像而不损失两个图像的颜色强度 我有图像1和图像2 2 我尝试使用 0 5 alpha 和 beta 但它给我的合并图像的颜色强度只有一半 dst cv2 addWeighted img1 0 5 img2 0 5 0 但是当我
  • CoreData:是否将图像存储到数据库?

    我正在制作一个应用程序 它从网站上为某些用户名拍摄照片 并将其显示在带有用户名的 UITable 中 然后当单击用户名时 它会显示该用户的照片 然后单击照片名称 它会显示全屏照片 我的问题是我正在使用 NSData 从互联网获取照片 我必须
  • 找到图像特征宽度的正确方法和Python包

    输入是一个在黑色背景上带有彩色 抱歉 垂直线的光谱 给定该带的近似 x 坐标 用 X 标记 我想找到该带的宽度 我对图像处理不熟悉 请引导我前往正确的方法图像处理和Python图像处理package也能起到同样的作用 我认为 PIL Ope
  • 当我使用 Image.FromFile() 时 FileNotFound

    我在这种情况下使用 Image FromFile string 方法 using System using System Collections Generic using System ComponentModel using Syste
  • 在 Android 中调整可绘制对象的大小

    我正在为进度对话框设置一个可绘制对象 pbarDialog 但我的问题是我想每次调整可绘制的大小 但不知道如何调整 这是一些代码 Handler progressHandler new Handler public void handleM

随机推荐

  • web.py 处理程序类的参数

    有没有办法将参数传递给 web py 处理程序类构造函数 例如 这些参数可能来自命令行 当运行主 web py 脚本时 位于第一个参数 用作端口号 之后 当然 具体取决于你的意思 毕竟都是Python 考虑你有可用的web config这是
  • dplyr - ifelse 在 mutate 内使用列表

    给定一个数据框df像下面这样 text lt model var value M1 a 12211 M1 b1 10 21 M1 b2 5 07 M1 c1 41 8 M1 c2 58 2 M1 d 1 6 M2 a 11922 M2 b1
  • 什么时候使用 NSDecimal、NSDecimalNumber 而不是 double 更好?

    对于简单的用途 例如跟踪 65 1kg 等重量值 使用 NSDecimal NSDecimalNumber 比使用 double 有什么好处吗 我的理解是 在这种情况下 双精度 甚至浮点 提供了足够的精度 如果我错了 请纠正我 首先 阅读乔
  • 将对象实例替换为 C# 中的另一个对象实例

    在这个问题中 我想知道这是否以及如何可能 这种技术看起来非常糟糕 但似乎我正在使用的 API UnityEditor 正在做类似的事情 我只是好奇 如果对同一个对象有多个引用 是否可以将一个新对象实例化到同一个内存槽中 以便所有先前的引用都
  • 我应该选择哈希、对象还是数组来表示 Perl 中的数据实例?

    我一直想知道这个问题 但从未真正深入研究过 情况是这样的 我有一组比较大的数据实例 每个实例都有相同的集合或属性 例如 a child instance name age height weight hair color favorite
  • 如何在远程Tomcat上部署war

    我想使用 maven tomcat 插件在远程 Tomcat 上部署 WAR 但遇到问题并出现异常 如下所述 请指导 使用的命令 mvn tomcat redeploy 错误日志 ERROR Failed to execute goal o
  • conda init 在 Windows 上的 bash 中不起作用

    我在 Windows 上安装了 Git Bash 和 conda 它提供了两个程序 C Program Files Git git bash exe and C Program Files Git bin bash exe 后者 C Pro
  • 在 Mac OS X 上静态嵌入 Python 时动态符号查找失败

    我正在构建一个嵌入 Python 的 Mac OS X 应用程序 从技术上讲 我的应用程序是一个捆绑包 即它的主要可执行文件是 MH BUNDLE 它是另一个应用程序的插件 我希望它静态嵌入 Python 但希望能够动态加载扩展 我做了以下
  • 如何防止 Safari 在遵循同源重定向时删除授权标头?

    Safari 似乎放弃了Authorization遵循同源 301 重定向时的标头 例如这段JS代码 fetch api endpoint that redirects headers new Headers Authorization s
  • 核心 jQuery 库的单元测试

    它们是否存在 如果存在 文档和代码在哪里 它们位于 Git 的 test 目录中 https github com jquery jquery tree master test https github com jquery jquery
  • Web 组件中的模板 html 和模板字符串

    使用 html 模板 然后 html 导入 创建 Web 组件还是使用模板字符串更好 这些方法有何优缺点 Using html 模板文件更好地重用 同一个文件可以在不同的 Web 组件中使用 此外 它们在大多数 IDE 中都能更好地显示 因
  • 使用 Office365 日历 API 无法获取会议室的所有繁忙时间

    尝试获取日历事件 以便允许用户选择与会者和会议室可用的会议时间 我们正在使用 Outlook 日历 REST API v2 findMeetingTimes https msdn microsoft com en us office off
  • 将函数应用于数据框列表中的列并附加结果

    我想将函数应用于数据框列表 该函数从每个数据框中的两列中获取元素 将它们相加 然后将输出添加到新列中的每个数据框中 创建虚拟数据 df 1 lt data frame data cbind rnorm 5 0 rnorm 5 2 rnorm
  • 在已打开的网页上运行测试用例

    我想通过量角器运行我的测试用例 但由于某些限制 我希望量角器在已经打开的页面上启动 这意味着我不希望驱动程序通过加载 chrome 并转到测试用例中定义的 url 来启动 如果我可以使用屏幕上已打开的 url 然后使用测试用例中定义的内容进
  • 在 RapidJson 中循环数组并获取对象元素

    如何从 ConstrValueIterator 中获取值 在这种情况下 我知道数组的元素是字典 也称为对象 代码总结 for rapidjson Value ConstValueIterator itr rawbuttons Begin i
  • 是否有一个函数可以查找字符向量中的所有小写字母?

    我刚刚写了一个 但我想知道 R 中是否已经存在一个 顺便说一句 这是函数 欢迎提出改进建议 set seed 50 x lt sample c letters LETTERS 7 is lower lt function x unlist
  • 使用 DataInputStream 从文件读取非常慢

    我有一个包含大量数字的文件 我尝试使用以下代码从文件中读取它 但是速度非常慢 任何人都可以帮助减少时间吗 以下是我以非常慢的方式读取它的代码 import java io BufferedInputStream import java io
  • 异步绘图和触摸

    我有一个绘制区域 UIView 我在 CGContextRef 中绘制 当然 我正在捕捉触摸来画画 虽然 drawRect 方法缓慢绘制大量现有对象 但不会捕获触摸 如果我在单独的线程中或使用函数 dispatch async 在drawR
  • 尝试 glUseProgram 时出现 Opengl 错误 1281

    我有什么想法可以调试这个opengl进一步错误 1281 我正在从文件加载源代码 编译 链接 然后尝试检查错误glUseProgram 在我的对象的绘制方法中 log info gl2 glIsProgram shaderProgram t
  • imagesLoaded 方法不适用于 JQuery 砌体和无限滚动

    我一直在使用 JQuery masonry 现在我正在添加无限滚动 几乎每个砖石 砖块 中都有图像 在我使用无限滚动之前 图像加载得很好 一切都很棒 我为无限滚动添加了 javascript 的下一部分 并在内部添加了 imagesLoad