jQuery/Ajax fadeIn(） 在 images/etc 加载后

jQuery/Ajax fadeIn() after images/etc have loaded

本文关键字：images etc 加载 Ajax fadeIn jQuery      更新时间：2023-09-26

我有一个脚本，通过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 中看到一个例子

我

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

（将来会添加预加载器，但预加载data中的图像的问题仍然存在。

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

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

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

怎么样： 

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

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

不需要 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);
        }
    });
相关文章：