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

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

使用 imagesload事件（不要与 混淆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()处理代码仍然在每种情况下运行一次:)