javascript - 加载图像/等后 jQuery/Ajax fadeIn()

Question

我有一个脚本，可以通过 ajax 为具有自定义 URL 的用户加载页面。例如，配置文件通常位于 http://example.com/users/Dan但如果用户有自定义 URL，例如 http://example.com/DansCustomURL ，然后我需要获取他们所需的目标 URL(在本例中为用户的个人资料/users/Dan)。

一旦 HMTL 被获取并加载到 data 参数中，内容就会立即显示，但 CSS 样式和一些图像等需要更长的时间，导致页面看起来很损坏，直到它们被显示为止。已加载。

是否有办法检测 data 变量中的所有元素何时已加载？

下面是我的 HTML 和内联 Javascript/jQuery/Ajax。

<omni>
<script type="text/javascript" src="assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(function() {
        var rewritePath = '/users/Dan';
        $.get(rewritePath, function(data,status) {
            $('.hidden-element').append(data).onDataElementsLoad(function() {
                $(this).fadeIn();
            });
        });
    });
</script>
<div class="hidden-element"></div>
</omni>

当然 .onDataElementsLoad() 不是一个真正的方法，但这就是我想要做的。

我熟悉 waitForImages 插件，但我希望不需要另一个依赖项来完成这个(看似)简单的任务。

可以在 https://merkd.com/url.php?url=dan 中查看示例

我本来打算发布一个 fiddle ，但它不允许我以这种方式使用外部链接。

(以后会增加预加载器，但是data中图片预加载的问题依然存在。)

我按照下面答案中另一位用户的指示尝试了 .done() 方法，但它并不能阻止页面在加载样式/图像之前出现损坏。

这是我现在使用的代码，正如您所看到的，示例静态页面在内容本身出现后，样式/加载元素仍然存在延迟。

        var rewritePath = '/u/dan';
        $.get(rewritePath).done(function(data) {
            console.log('loaded');
            $('omni').after(data).remove();
        });

Answer 1

关于:

$.get( "test.cgi", { name: "John", time: "2pm" } )
 .done(function( data ) {
   alert( "Data Loaded: " + data );
 });

.done 是 $.get 函数中成功从 ajax 加载内容的回调。