Question

我有一个jQuery函数，它接受一个插件生成的缩略图，然后将它扔到DOM的其他地方。该功能有一半的时间。

我必须这样做的原因是因为插件会在页面加载时自动呈现一半HTML，因为CSS解决方案非常糟糕。我不得不把容器塞进去，这真是太糟糕了。

插件是带缩略图的图片。每次点击缩略图时，相应的照片在主画面中上升;

代码：

setTimeout(function(){
  $('ol').append('<li data-toggle="modal" id="thumb" class="yt-thumb" overflow-scroll="false" overflow-scroll="true" data-target="#youtubeModal"><img src="/images/dome-thumb.jpg" /></li> '); // add youtube to thumb slider
  $('ol').appendTo( $('#thumb-area') )
 }, 2000);

它在setTimout中的原因是插件生成代码时似乎有延迟。不幸的是，该插件是整体主题的一部分，我无法发布代码，因此欢迎模糊的想法。

Answer 1

我同意MutationObserver可能是最好的方法。

处理它的另一种方法是拥有一个功能，如果DOM没有为你做好准备，它会重试转换。像这样：

function transformThumbnails(iteration) {
  if (iteration === undefined) {
    iteration = 0;
  }
  else if (iteration < 100) { // don’t retry forever
    var isReady = true; // TODO: test if DOM is ready for your transformation
     if (isReady) {
       $('ol').append('<li data-toggle="modal" id="thumb" class="yt-thumb" overflow-scroll="false" overflow-scroll="true" data-target="#youtubeModal"><img src="/images/dome-thumb.jpg" /></li> '); // add youtube to thumb slider
       $('ol').appendTo( $('#thumb-area') )
     }
     else {
       // not ready, so retry
       setTimeout(function(){transformThumbnails(iteration + 1);}, 100);
     }
  }
}
transformThumbnails(); // kick it off

jQuery的工作量是加载页面的3/4倍

1 个答案: