如何在图像加载时放置 ajax 加载器答案

【问题标题】：how to put ajax loader while image loads itself如何在图像加载时放置 ajax 加载器
【发布时间】：2012-05-26 11:27:51
【问题描述】：

如何使用 ajax 加载器是我的问题，我是 ajax 新手。我有一个功能可以在用户单击缩略图时更改图像但图像很重所以我想要 ajax 直到第二个图像自行加载。我已经创建了 loader.gif 现在我只想知道如何将此图像用作加载器。

<script type="text/javascript">
    jQuery(function (){
        jQuery('#data').find('img').each(function(){
            jQuery(this).click(function (){
                var crd = jQuery(this).attr('title');
                jQuery('#bigimg').fadeOut('slow', function (){
                    jQuery(this).find('#imnew').attr('src', 'images/' + crd +".jpg")
                }).fadeIn()
            })
        })
    })
</script>

HTML

<div id="bigimg">
    <img src="images/bigImage1.jpg" id="imnew" alt="" />
</div>

<div id="data">
    <div class="sub">
        <div class="1">
            <img src="images/thumb1.png" width="117" height="74" title="bigImage1" alt="" />
        </div>
        <div class="2">
            <img src="images/thumb2.png" width="117" height="74" title="bigImage2" alt=""/>
        </div>
        <div class="3">
            <img src="images/thumb3.png" width="117" height="74" title="bigImage3" alt=""/>
        </div>
        <div class="4">
            <img src="images/thumb4.png" width="117" height="74" title="bigImage4" alt=""/>
        </div>
        <div class="5">
            <img src="images/thumb1.png" width="117" height="74" title="bigImage1" alt=""/>
        </div>
        <div class="6">
            <img src="images/thumb2.png" width="117" height="74" title="bigImage2" alt=""/>
        </div>
        <div class="7">
            <img src="images/thumb3.png" width="117" height="74" title="bigImage3" alt=""/>
        </div>
        <div class="8">
            <img src="images/thumb4.png" width="117" height="74" title="bigImage4" alt=""/>
        </div>
    </div>
</div>

【问题讨论】：

标签： jquery html ajax

【解决方案1】：

您需要使用 jQuery.load 来告诉您图像何时完成加载。

当一个元素和所有子元素都具有已完全加载。此事件可以发送到任何元素与 URL 关联：图像、脚本、框架、iframe 和窗口对象。 http://api.jquery.com/load/

<script type="text/javascript">
    jQuery(function (){
        jQuery('#data').find('img').each(function(){
            jQuery(this).click(function (){
                var crd = jQuery(this).attr('title');
                // $('#loader').show();
                jQuery('#bigimg').fadeOut('slow', function (){
                    jQuery(this).find('#imnew').attr('src', 'images/' + crd +".jpg")
                    .load(function() { 
                                    $('#loader').hide();
                                    $('#bigimg').fadeIn()

                   });
                })
            })
        })
    })
</script>

【讨论】：

【解决方案2】：

试试这个：

为所有缩略图赋予相同的类名，然后：

        $('.thumbnail').click(function (){
            var thumbNail = $(this);
            var thumbPath = $(this).attr('src');
            var crd = $(this).attr('title');
            $(this).attr('src', 'images/loader.gif');
            $('#bigimg').fadeOut('slow', function (){
               $(this).load(function() {
                  $(this).fadeIn();
                  $(thumbNail).attr('src', thumbPath);
               });
               $(this).attr('src', crd);
            })

        })

【讨论】：