0

请帮忙。我正在谷歌搜索我的问题的答案，但找不到任何解决方案。

我正在使用 $.post() 从 PHP 文件中获取图像名称

我的页面上有图像缩略图，但没有任何 src。从文件中读取名称后，它将这些 src'es 更改为它得到的那些。

我想让它们都以隐藏模式加载并带有加载器，然后删除加载器并淡入我的图像。

加载程序启动，然后隐藏，但图像仍在继续加载。我做错了什么？

非常感谢。

这是我的代码的一部分：HTML：

<div id="window">
            <div id="wrapper">
                <div class="container" style="left:10px; top:10px;"><img class="image" /></div>
                <div class="container" style="left:120px; top:10px;"><img class="image" /></div>
                <div class="container" style="left:230px; top:10px;"><img class="image" /></div>
                <div class="container" style="left:340px; top:10px;"><img class="image" /></div>
                <div class="container" style="left:450px; top:10px;"><img class="image" /></div>

                <div class="container" style="left:10px; top:120px;"><img class="image" /></div>
                <div class="container" style="left:120px; top:120px;"><img class="image" /></div>
                <div class="container" style="left:230px; top:120px;"><img class="image" /></div>
                <div class="container" style="left:340px; top:120px;"><img class="image" /></div>
                <div class="container" style="left:450px; top:120px;"><img class="image" /></div>

                <div class="container" style="left:10px; top:230px;"><img class="image" /></div>
                <div class="container" style="left:120px; top:230px;"><img class="image" /></div>
                <div class="container" style="left:230px; top:230px;"><img class="image" /></div>
                <div class="container" style="left:340px; top:230px;"><img class="image" /></div>
                <div class="container" style="left:450px; top:230px;"><img class="image" /></div>
            </div>

        </div>

JS：

$('#wrapper').append('<div class="loading"></div>');
$.post('dirscan.php', {'dir':dir},
    function(data){

        imagNames = data;
        ImgCount = imagNames.length;
        totalPages = parseInt(ImgCount / 15) - 1;
        if ((totalPages % 15) != 0) { totalPages++ };

        $('img.image').each(function(i){
            if (imagNames[(pageN*15)+i]) {
                $(this).attr('src', imagNames[(pageN*15)+i])
            }
            else { $(this).addClass('close') }
        })

        $('img.image').load(function(){
            $('.loading').fadeOut(500);
            $('img.image').fadeIn(700);
            $('.loading').remove();})

},'json');
4

1 回答 1

1

找到方法了！

$('img.image').each(function(i){
if (imagNames[(pageN*15)+i]) {
$(this).attr('src', imagNames[(pageN*15)+i])
    $(this).load(function(){
$('.loading').fadeOut(500);
$(this).fadeIn(700); //here is the key
$('.loading').remove();})

希望对任何人都有帮助。

于 2013-01-27T14:58:44.497 回答