Question

我在页面上动态添加图片：

<div class="simple_overlay" id="overlay">
   <img src="" />
</div>

<script type="text/javascript">
$(function() {
    $("a[rel]").overlay({
        var source = this.getTrigger().attr('href');
        this.getOverlay().find("img").attr({'src': source});
    });
});
</script>

现在，我需要获取新图像的宽度并计算与其对应的margin-left。原生jQuery工具方法不起作用，因为加载叠加时，图像尚未加载且容器#overlay宽度为0。是否有任何选项可以模拟此链上的回调，因此我可以在width()评估后立即使用attr()？

Answer 1

使用图片load event（不要与window.load混淆），如下所示：

$("a[rel]").overlay({
    var source = this.getTrigger().attr('href');
    this.getOverlay().find("img").one('load', function() {
      //run your code here, the image is loaded and is "this"
    }).each(function() {
      if (this.complete) $(this).load(); //trigger load, handles from cache cases
    }).attr({'src': source});
});

这使用.one()仅运行一次代码。加载图像时会触发load事件...但是从缓存中加载它时并不总是触发（取决于浏览器），这就是.each()是为了。如果浏览器从缓存加载它并且触发了事件......也没关系，.one()处理，代码在每种情况下仍然运行一次：）

如何评估链中的代码或假装回调函数？

1 个答案: