Question

我想在加载.flexslider div但是jquery（$('flexslider').load()）不起作用时删除加载图像。 div完全加载后如何删除图像？

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

jquery是：

$(document).ready(function(){

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

我认为问题是$('.flexslider').load()功能不起作用。有没有其他方法可以解决这个问题？

Answer 1

隐藏指定错误的第一个元素，如果您按类指定元素，则需要指定'。'如果你指定了这个类。

其次，在方法“load”中传递闭包而不是对象

尝试这样的想法

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

Answer 2

你可能想要的是

<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

检查这个希望它可以工作。负载功能期望来自服务器的数据并替换你提到的那个div。我假设你不想要来自服务器的数据所以我使用了简单的index.html

public static void main(String[] args) {
        // TODO code application logic here
        Scanner inp=new Scanner(System.in);
        int a,i,j;
        int arr[]=new int[100];
        System.out.println("Enter the limit");
        a=inp.nextInt();
        j=0;
        for(i=2;i<a;i++)
        {
            if((i%2)==0)
            {
                arr[j]=i;
                j++;
            }
        }
        System.out.println("Even numbers till " +a);
        System.out.println(Arrays.toString(arr));
}

Answer 4

根据文档，load事件不应与div一起使用。

当加载事件和所有子元素已完全加载时，会将事件发送到元素。此事件可以发送到与URL关联的任何元素：图像，脚本，框架，iframe和窗口对象。

如果此html位于根文档中，我建议使用DOMContentLoaded。

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

如果您使用$ .load来获取远程html。您可以传递回调

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

Answer 5

您可以在loadingDiv事件中删除$(window).load。 $(window).load在完整加载完整页面时执行，包括所有帧，对象和图像。希望这会对你有所帮助。

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

更新：要在loadingDiv div完全加载时删除flexslider，请执行以下操作。计算flexslider中的图片数量，加载最后一张图片后隐藏loadingDiv。

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

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

当div完全加载时删除另一个div

5 个答案: