Question

如何使用 ajax 装载器是我的问题 I 是一个新到 ajax 的新问题。我有一个函数, 当用户点击缩略图图像时, 可以改变图像, 但是图像很重, 所以我想要 ajax, 直到第二个图像装入本身。我创建了ajax 。 gif now I just want to know how to use this image as a tracker.

<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 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>

Answer 1

您需要使用 jQuery. 装入来告诉您图像何时完成装入。

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object. 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>

Answer 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);
            })

        })

友情链接