加载后如何将 src 属性附加到一组图像？答案

【问题标题】：How do I append the src attributes to a set of images after they have loaded?加载后如何将 src 属性附加到一组图像？
【发布时间】：2012-10-27 14:46:21
【问题描述】：

这是我的场景：

我有一个带有分页并通过无限滚动增强的页面

该页面有一个项目列表，其中每个项目在 smarty 中看起来像这样

<div id="link-{index}">
<div align="left"><a href={$url}></div><div alight="right"><img src="" id="{$url}"></div>
</div> <script>imager({$url});</script>

我正在使用一项服务来动态获取给定 URL 的图像 src，并通过定义 imager(x){ document.getElementById(x).src = service(x).image; } 将其附加到图像中

现在这可以正常工作了，只要使用正常的分页，就可以在 URL 旁边显示正确的图像。不适用于第 2 页以后的无限滚动，因为它使用 JQuery 并解析每个项目的成像器 JS 脚本。

我一直在尝试为无限滚动创建一个回调函数，该函数将执行成像器所做的工作，但在加载页面后但我无法使其工作。

任何提示将不胜感激。谢谢

【问题讨论】：

检查无限滚动插件的文档，看看它是否在加载新页面时有回调。然后使用它为新图像添加src 属性。
这正是我想要做的，但我对 jQuery 很陌生，对 JS 的经验很少。有没有办法循环遍历无限滚动获取的新页面中的最后 n 个图像以附加它们的 src？

标签： javascript jquery infinite-scroll

【解决方案1】：

在加载新页面时的回调中，您可以执行以下操作：

$('img:not([src])').each(function() {
    $(this).attr('src', service($(this).attr('id')).image);
});

这假定唯一没有来源的图像是那些刚刚由无限滚动器加载的图像。如果小部件向回调提供参数，告诉它 DOM 的哪些部分刚刚被分页，您可以使用它来进一步缩小范围； jQuery 选择器的第二个参数是要搜索的上下文。

【讨论】：