Question

我有一个代码，可以通过单击按钮从mysql数据库刷新。从mysql我得到刷新的图像链接，但我不知道，帽子链接和多少。

我有一个＆＃34; loading＆＃34;旋转直到页面加载的圆圈，但它只显示，直到加载代码，这不是很长。之后，我在页面上看到小空方块作为占位符，直到真实图像出现。

有没有人知道，如何显示旋转圆圈，直到所有图像都被加载？

我尝试在网上找到一些建立链接数组的javascript示例，但我无法将它们集成到我的代码中，因为代码的构造非常不同，我显然不是专业人士。

所以这是我的代码（我现在简化了）：

$(document).ready(function() {

    function refresh(free){
        $("#loadingfree").show();
        if (free) datum = datum + free;
    var url = "listfree.php?date=" + datum;
    $.getJSON(url,function(data) {
           var div_data = '';
            $.each(data, function(i,data) {

                div_data += "<div class='iconsfree'><a href='"+data.title+"-"+data.appID+"' title='"+data.title+"'><img src='"+data.icon+"'></img></a></div>";
            });
            $("#loadingfree").hide();
            $("#app-wrapper-free").html(div_data);

        });

    }

$(document).on('click', '#prevbuttonfree', function(e){
         e.preventDefault();
         $("#app-wrapper-free").empty();
         refresh(-1);
});

$(document).on('click', '#nextbuttonfree', function(e){
         e.preventDefault();
         $("#app-wrapper-free").empty();
         refresh(+1);
});

    // call the method when page is opened:
    refresh(0);

});

Answer 1

如果您希望微调器在图像加载之前继续显示，您应该使用load eventListener来实现这一点。

因此，假设您在向服务器发出请求时，您的代码具有微调器。

//just an example
$('button').click(function(){
//call server
    $.ajax();
//show spinner
$('.spinner').show();
});

现在我们将告诉微调器保持显示，直到图像完成加载。

$('img').on('load',function(){
//Not sure what your spinner is called
    $('.spinner').hide();
});

Answer 2

我最终得到了这个。它稍后会显示内容。它是一个虚假的预载器。

<script type="text/javascript">


var datum = 0;

$(document).ready(function() {



    function refresh(free){



        if (free) datum = datum + free;
    var url = "listfree.php?date=" + datum;
    $.getJSON(url,function(data) {
           var div_data = '';
            $.each(data, function(i,data) {
    if ($("#date_free").html() == '');


                div_data += "<div class='iconsfree'><a href='"+data.title+"-"+data.appID+"' title='"+data.title+"'><img src='"+data.icon+"'></img></a></div>";
            });

          $("#loadingfree").show();
          $(div_data).hide()

                 .appendTo("#app-wrapper-free")

          setTimeout( function() { 
          $("#app-wrapper-free").children().show() 
          $("#loadingfree").hide()
          }, 3000 );

       });

    }




$(document).on('click', '#prevbuttonfree', function(e){
         e.preventDefault();
         $("#app-wrapper-free").empty();
         refresh(-1);
});

$(document).on('click', '#nextbuttonfree', function(e){
         e.preventDefault();
         $("#app-wrapper-free").empty();
         refresh(+1);
});

    // call the method when page is opened:
    refresh(0);

});


</script>

如何在刷新时预加载图像？

2 个答案: