mootools - 在继续之前等待图像加载的非超时方法？

Question

我有一个 Fx.Slide 实例，它通过 ajax 加载内容，然后滑动打开元素。它在滑动打开之前正确等待 AJAX 调用返回（并填充其目标元素的内容），但是因为我没有传输图像数据，只有 url，当 Fx.Slide 实例时，用户的浏览器仍在下载图像被切换。

因此，在测量元素时，它没有考虑图像的大小，因此滑开的距离不够远。

A.delay()会起作用，但它是一种 hack-ish 解决方法。

相关的jsFiddle

---

解决方案

感谢 lorenzo-s，以下解决方案非常有效：

var container = document.id('something');
new Request({
    url: '/path/to/listener',
    onSuccess: function(imageUrl) {
        Asset.image(imgSrc, {
            title: 'Something',
            onLoad: function() {
                // .. trigger the Fx.Slide instance here
            }
        }).inject(container);
    }
});

Answer 1

您应该使用Asset.image()Mootools More 中的方法。

该方法预加载图像并返回 img 元素。您可以使用onLoad图像“准备好”后将调用的属性（在第二个参数对象上）。

Asset.image('http://url.to/your/image.jpg', {
    onLoad: function() {
        alert('Image ready.');
    }
});

此处更新示例：http: //jsfiddle.net/6Lpeu/3/