Question

我有一个脚本，可以通过ajax为具有自定义URL的用户加载页面。例如，个人资料通常位于http://example.com/users/Dan，但如果用户有自定义网址，例如http://example.com/DansCustomURL，那么我需要获取他们想要的目标网址（在这种情况下是用户的个人资料/用户/旦）。

一旦HMTL被提取并加载到data参数中，内容立即出现，但CSS样式和一些图像等需要更长的时间，导致页面在加载之前看起来已经破碎。 / p>

有没有检测到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

看到一个例子

我打算发一个小提琴，但它不允许我以这种方式使用外部链接。

（将来会添加预加载器，但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的成功加载内容的回调。

Answer 2

不需要ajax。你可以做这样的事情

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
    .on('load', function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
            $("#something").append(img).fadeIn(50);
        }
    });

图像/ etc加载

2 个答案: