如何在jquery中加载iframe之前加载images loading.gif？

我有一个Jquery代码：

<script type='text/javascript'>
jQuery(function ($) {
    $('.basic').click(function (e) {
        var loading = '<img src="loading.gif"/>';
            $('<div></div>').load(loading);
        var src = 'test.php';
            var html = '<iframe src="'+src+'&output=embed" style="border:0"></iframe>';
            $.modal(html);
            return false;
    });
});
</script>

jQuery（函数（$）{
$（'.basic'）。单击（函数（e）{
var加载=“”；
$（''）。加载（加载）；
var src='test.php'；
var html=''；
$.modal（html）；
返回false；
});
});

如何在加载iframe之前加载image load.gif？

您可以使用回调

<script type='text/javascript'>
jQuery(function ($) {
    $('.basic').click(function (e) {
        var loading = '<img src="loading.gif"/>';

        $('<div></div>').load(loading, function() {
        var src = 'test.php';
            var html = '<iframe src="'+src+'&output=embed" style="border:0"></iframe>';
            $.modal(html);
            return false;
    }); //end of loading the image
  }); //end of loading the iframe
});
</script>

jQuery（函数（$）{
$（'.basic'）。单击（函数（e）{
var加载=“”；
$（''）.load（加载，函数（）{
var src='test.php'；
var html=''；
$.modal（html）；
返回false；
})；//加载图像结束
})；//加载iframe的结束
});

您可以使用回调

<script type='text/javascript'>
jQuery(function ($) {
    $('.basic').click(function (e) {
        var loading = '<img src="loading.gif"/>';

        $('<div></div>').load(loading, function() {
        var src = 'test.php';
            var html = '<iframe src="'+src+'&output=embed" style="border:0"></iframe>';
            $.modal(html);
            return false;
    }); //end of loading the image
  }); //end of loading the iframe
});
</script>

jQuery（函数（$）{
$（'.basic'）。单击（函数（e）{
var加载=“”；
$（''）.load（加载，函数（）{
var src='test.php'；
var html=''；
$.modal（html）；
返回false；
})；//加载图像结束
})；//加载iframe的结束
});

我的解决方案：

jQuery(function ($)
{
    $('.basic').click(function (e)
    {
        $('<img />').bind('bind',function()
        {
            var src = 'test.php';
            var html = '<iframe src="'+src+'&output=embed" style="border:0"></iframe>';
            $.modal(html);
        }).attr('src','loading.gif');
        return false;
    });
});

jQuery（函数（$）
{
$（'.basic'）。单击（函数（e）
{
$('';
$.modal（html）；
}).attr（'src'，'load.gif'）；
返回false；
});
});

我的解决方案：

jQuery(function ($)
{
    $('.basic').click(function (e)
    {
        $('<img />').bind('bind',function()
        {
            var src = 'test.php';
            var html = '<iframe src="'+src+'&output=embed" style="border:0"></iframe>';
            $.modal(html);
        }).attr('src','loading.gif');
        return false;
    });
});

jQuery（函数（$）
{
$（'.basic'）。单击（函数（e）
{
$('';
$.modal（html）；
}).attr（'src'，'load.gif'）；
返回false；
});
});

如果你想让loading.gif显示在某个地方，你需要把它放在你的页面上。正如您现在看到的，它不会显示，因为它不在页面中。在单击之前加载这样的图像的最佳方法是将图像放在实际页面的div中（因此在加载页面时加载图像），并使其最初显示为：无。然后，当您想显示它时，只需在其上使用.show（），图像已经加载并且已经在页面中。您也没有正确使用

.load（）

。它不需要HTML字符串。它需要一个URL从中进行ajax调用并插入结果。这不是你想要的。如果你想让loading.gif显示在某个地方，你需要把它放在你的页面中。正如您现在看到的，它不会显示，因为它不在页面中。在单击之前加载这样的图像的最佳方法是将图像放在实际页面的div中（因此在加载页面时加载图像），并使其最初显示为：无。然后，当您想显示它时，只需在其上使用.show（），图像已经加载并且已经在页面中。您也没有正确使用

.load（）

。它不需要HTML字符串。它需要一个URL从中进行ajax调用并插入结果。这不是你想要的。