淘先锋技术网

首页 1 2 3 4 5 6 7

jquery未加载前给个动画

jQuery是一个非常流行的JavaScript库，被广泛应用于JavaScript开发以及网站优化中。但是，在网页加载的过程中，有可能会出现jQuery未加载完成的情况。如果在等待jQuery加载的同时，没有任何反应，会让用户产生不好的体验。因此，我们可以给网页设置一个加载动画，让用户知道网页正在加载，同时也可以增加用户体验。


    // 首先，在head标签中引入loading.js文件
    <head>
        <script src="loading.js"></script>
    </head>

    // 然后，在loading.js中，编写以下代码
    $(document).ready(function(){
        $('body').append('<div class="loading"></div>');
        // 在body中添加一个loading元素
        $('.loading').css({
            'position': 'fixed',
            'top': '50%',
            'left': '50%',
            'margin-top': '-50px',
            'margin-left': '-50px'
        });
        // 设置loading元素的定位和样式
    });

    // 最后，在jQuery加载完成后，移除loading元素
    $(window).load(function(){
        $('.loading').fadeOut(function(){
            $(this).remove();
        });
    });

jquery未加载前给个动画

以上代码中，loading元素的定位样式使用了CSS的position属性，设置为fixed即固定定位；top和left分别设置为50%，表示位于页面的中央；margin-top和margin-left分别设置为-50px，表示将loading元素向左和向上移动50px，让其处于中心位置。

等到jQuery加载完成后，使用jQuery的fadeOut()方法将loading元素渐隐，并在渐隐完成后，使用jQuery的remove()方法将loading元素从DOM树中移除。

jqueryloadingjquery动画