如何在无限滚动中重新加载脚本

Posted 2023-05-07

【中文标题】如何在无限滚动中重新加载脚本

【英文标题】：How can I reload a script in infinite scroll

【发布时间】：2021-07-09 06:14:09

【问题描述】：

首先，我不知道我是否使用正确的词来描述这种情况。其次，我不知道如何编写js，所以我会尽可能地描述这个东西。我基本上是在用砖石和无限滚动制作一个 tumblr 主题。我正在使用最新版本的砖石和无限滚动。它们都可以完美地工作。问题是，通过无限滚动附加的所有帖子看起来都不像最初的帖子。我使用这些代码来取消嵌套块引用并调整照片集：

// Unnest
$('.post').unnest(
    yourCaption: ".caption, .text_body", 
    wrapName: ".tumblr_parent", 
    newCaptionUsername: true, 
    originalPostCaptionUsername: false, 
    tumblrAvatars: true, 
    tumblrAvatarClass: ".tumblr_avatar", 
    usernameColon: false 
);
// For legacy photosets
$(document).ready(function()
    $('.photo-slideshow').pxuPhotoset(
        lightbox: true,
        rounded: false,
        gutter: '3px',
        photoset: '.photo-slideshow',
        photoWrap: '.photo-data',
        photo: '.pxu-photo'
    );
);
// For NPF photosets
var npfOptions = 
    includeCommonPhotosets: false,
    photosetMargins:"3"

npfPhotosets(".post", npfOptions);

通过无限滚动附加的帖子似乎根本不受这些代码的影响。这是我使用的砌体和无限滚动的代码：

var $grid = $('#posts').masonry(
    itemSelector: '.post',
    columnWidth: 1
);
$grid.imagesLoaded().progress( function() 
    $grid.masonry();
);  

// get Masonry instance
let msnry = $grid.data('masonry');

// init Infinite Scroll
$grid.infiniteScroll(
  // Infinite Scroll options...
  append: '.post',
  path: '.next_page',
  outlayer: msnry
);

我应该怎么做才能完成这项工作？

【问题讨论】：

嗨，欢迎来到 SO。请花时间阅读tour 和How to Ask。您的问题没有（显然）有问题，只是建议您阅读tour。

当你运行$("selector")之类的代码时，它只会选择代码运行时存在的元素。因此，您稍后添加的元素不会受到影响。这就像说“撕掉这些纸……撕……这是另一张纸，为什么没有撕掉？-因为你撕第一批时没有它”。答案是在新添加的元素添加后重新运行代码——infiniteScroll 应该有一个回调或事件来挂钩。见infinite-scroll.com/events.html

【参考方案1】：

正如 cmets 中所指出的，每次将新内容添加到页面后，都应调用您的初始函数。你可以使用infinite-scroll提供的事件来实现，如下：

var infiniteGrid = $grid.infiniteScroll(
    // Infinite Scroll options...
    append: '.post',
    path: '.next_page',
    outlayer: msnry
);
infiniteGrid.on( 'append.infiniteScroll', function( event, response, path, items ) 
    // do your thing with the new items here
);