完全加载div后删除另一个div

Question

I want to remove the loading image when the .flexslider div is loaded but the jquery ( $('flexslider').load() ) is not working. How to remove the image when the div is completely loaded?

index.html

<div class="flexslider">
        <div class="loadingDiv">
            <img src="images/banner0.jpg" style="visibility:hidden"/>
            <div class="showbox">

                <div class="loader">
                    <svg class="circular" viewBox="25 25 50 50">

                        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>                           
                    </svg>
                </div>
            </div>          
        </div>                                              
            <ul class="slides">
                <li><img src="images/banner1.jpg" width="1000px" height="500px" alt="" class="animated fadeInRightBig">
                    <div class="txtoverlay">
                        <div class="centralise">
                            <div class="verticalwrap">
                            </div>
                        </div>
                    </div>
                </li>
                <li><img src="images/banner2.png" alt="">
                    <div class="txtoverlay">
                        <div class="centralise">
                            <div class="verticalwrap">
                                <article>
                                </article>
                            </div>
                        </div>
                    </div>
                </li>
                <li><img src="images/banner3.png" alt="">
                    <div class="txtoverlay">
                        <div class="centralise">
                            <div class="verticalwrap">
                                <article>
                                </article>
                            </div>
                        </div>
                    </div>
                </li>
                <li><img src="images/banner4.jpg" alt="">
                    <div class="txtoverlay">
                        <div class="centralise">
                            <div class="verticalwrap">
                                <article>
                                </article>
                            </div>
                        </div>
                    </div>
                </li>
                <li><img src="images/banner5.jpg" alt="">
                    <div class="txtoverlay">
                        <div class="centralise">
                            <div class="verticalwrap">
                                <article>
                                </article>
                            </div>
                        </div>
                    </div>
                </li>
                <li><img src="images/banner6.jpg" alt="">
                    <div class="txtoverlay">
                        <div class="centralise">
                            <div class="verticalwrap">
                                <article>
                                </article>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </div>

The jquery is:

$(document).ready(function(){

  $('.flexslider').load({
    $('loadingDiv').remove();
  });
});

I think the problem is $('.flexslider').load() function is not working. Is there another way to work out this problem?

Answer 1

The first element that hides incorrectly specified, if you take an element by the class you need to specify '.' if you specify the class.

Secondly, in the method "load" is transferred the closure and not the object

Try somethink like that

  $('.flexslider').load(function(){
      $('.loadingDiv').remove();
  });

Answer 2

What you might be wanting is

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="flexslider">
    <div class="loadingDiv">
       somge gif here
    </div>                                              
    <ul class="slides">
        <li><img src="duck.jpg"></li>
        <li><img src="dog.jpg" alt=""></li>
        <li><img src="boar.jpg" alt=""></li>
        <li><img src="deer.png" alt=""></li>
    </ul>
</div>
<script>
    var imagesToLoad=  $('.slides img').length,
        loaded = 0;
    $('.slides img').bind('load', function() {
        loaded++;
    console.log('Loaded '+loaded+'/'+imagesToLoad);
    if(loaded===imagesToLoad)
        $('.loadingDiv').remove();
   });
</script>

Answer 3

Check this hope it can work.Load function expect data from server and replace with that div that you mentioned.I assume you do not want data from server so i have used simple index.html

$(document).ready(function(){
   $( ".flexslider" ).load( "index.html" );
    setTimeout(function(){
   $(".loadingDiv").hide();
}, 3000);
});

Answer 4

According to documentation load event is not supposed to be used with divs.

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.

If this html is inside your root document, I recommend to use DOMContentLoaded instead.

$(function() {
    $('.loadingDiv').remove();
});

If you are using $.load to fetch remote html. You can pass a callback

$('div').load(url, function() {
   $('.loadingDiv').remove();
});

Answer 5

You can remove loadingDiv on $(window).load event. $(window).load executes when complete page is fully loaded, including all frames, objects and images. Hope this will help you.

$(window).load(function () {
    $('.loadingDiv').remove();
}); 

Update: For removing loadingDiv when flexslider div is completely loaded do like below. Count the number of images in flexslider and after loading the last image hide the loadingDiv .

var images = $('.flexslider img'),
    imagesLength = images.length;

images.load(function () {
    if (! --imagesLength) {
       $('.loadingDiv').hide();
    }
});