ローダーのGIF遅延がブラウザのローダー画像と比較されました

ここに私が「ローダー」gifを表示しようとしているコードスニペットがあります。私は自分のlocalhostでテストしていて、うまく動作します。しかし、今少し観察したところ、PHPがSQLデータベースからデータを引き出す間は実際にgifを表示しているのだろうか。ローダーのGIF遅延がブラウザのローダー画像と比較されました

ブラウザのキャッシュをクリアしてページを更新すると、ページのローダーが読み込まれる前にブラウザのローダーイメージが数回回転することがわかりました。何か不足していますか？

PS：私が持っているローダーgifは明らかに非常に軽いファイルです。

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
    <script> 
     $(document).ready(function() { 
      $(document).ajaxStart(function() { 
       $("#wait").css("display", "block"); 
      }); 
      $(document).ajaxComplete(function() { 
       $("#wait").css("display", "none"); 
      }); 
      $("#text").load("example.php"); 
     }); 
    </script> 
</head> 

<body> 
    <button>Change Content</button> 
    <div id="wait" style="display:none;"><img src="../images/loader.gif"></div> 
    <div id="text"></div> 
</body> 

</html>

出典

2017-02-25 Mohan Wijesena

このような画像の読み込みをテストするときは、呼び出されるスクリプトに擬似遅延を入れたいと思います。 usleep（3000）;あなたに3秒の休止を与えるでしょう。そこに遅延があると、遅い接続で希望どおりにローダー画像が表示されているかどうかを視覚的に確認できます。 –

@SymeonQuimbyありがとうございました！ –

開発しながら、AJAX呼び出しで使用ローダーイメージをテストするための素晴らしい方法は、あなたが呼び出しているスクリプト内の人工的な遅延を導入することです。

usleep(3000);

これは、あなたが視覚的にアクションであなたのローダーの画像を見ることができるように、ネットワーク遅延のまともな量をシミュレートし、3秒間のスクリプト睡眠を行います。

出典

2017-02-25 16:33:51

ローダーのGIF遅延がブラウザのローダー画像と比較されました

答えて

関連する問題