Holder.js -- 如何获取 DOM 元素？

Question

Holder.js -- 如何获取 DOM 元素？

6

我想要动态地在我的页面上添加一个占位图。

像下面这样插入并不起作用：

$('<li>',{class:'file-item'})
    .append($('<img>',{'data-src':'holder.js/150x150'}))
    .append($('<span>',{class:'file-name'}).text(file.name))
    .appendTo('#file-list');

因为持有者脚本已经运行并且不再搜索新元素。

但是，我们可以手动再次运行它：

Holder.run()

但是这样会扫描所有已经添加的元素。

那么...有没有办法让holder.js创建并返回一个DOM元素，以便我可以手动添加它，而不必重新运行整个过程？

- mpen

Holder是一个jQuery插件吗？还是其他什么东西？ - the system

似乎有一个add_image方法可以处理这个。 - Explosion Pills

1

小心使用{class:'file-name'}，它在一些旧浏览器中会出现问题。请使用className或"class"。 - the system

@thesystem: holder.js 是一个独立的生成占位图像的库。它被用于 Twitter Bootstrap 中。在问题中添加了链接。 - mpen

@thesystem：关于class属性的观点非常好。我以前也遇到过这个问题（我想是在IE中），让我感到非常困惑。报错信息非常误导人。 - mpen

@ExplosionPills：阅读add_image的源代码...看起来很奇怪。它使用您提供的源创建一个图像元素，然后将其附加到一个元素上....我不希望它执行附加操作，而且它似乎也没有运行图像生成代码。 - mpen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- imsky · Accepted Answer

将一个 Node 作为 images 属性传递给 Holder.run，你就可以在任何单个图像上运行 Holder。Holder 本身不创建 DOM 元素，它只是改变了 src 的值。

代码:

var image = $("<img>").attr({
    "data-src": "holder.js/300x200"
})

Holder.run({
    images: image[0]
});

image.appendTo("body");

这是一个实时示例，链接为：http://jsfiddle.net/imsky/p3DMa/。