1

https://github.com/alexanderdickson/waitForImagesのプラグインを使用して、画像がいつ読み込まれたかを検出しています。

以下は私のコードです：

$('.marquee').waitForImages(function() {
  console.log('All images have loaded.');
  setTimeout(startMarquee);
}, function(loaded, count, success) {
  console.log(loaded + ' of ' + count + 
   ' images has ' + (success ? 'loaded' : 'failed to load') + '.');
  $(this).addClass('loaded');
});

画像のロードが完了したら、画像のマーキー スクロールを開始します。

私の問題は、一部の画像がまだ読み込まれておらず、次のような小さな空の正方形のボックスが表示されていることです ここに画像の説明を入力。

プラグインもすでにロードされていると見なします。それを修正する方法はありますか？

小さな空の正方形のボックスのみを表示すると、画像が読み込まれたと見なされますか?

4

2 に答える 2

0

マーキー コードを実行する前に、すべてのページ画像が読み込まれるまで待ちたい場合は、次を使用できます。

$(window).on("load", function() {
    // all page html and images loaded
});

詳細については、次の質問を参照 してください: 何かを実行する前にすべての画像が読み込まれるまで jQuery に待機させる公式の方法

于 2016-08-26T10:13:59.503 に答える
0

自分で書いてください。

<marquee id="marquee" style="visiblity:hidden">
  <img src="image1.jpg" onload="countMe(this,1)" onerror="countMe(this,0)"/>
  <img src="image1.jpg" onload="countMe(this,1)" onerror="countMe(this,0)"/>
  <img src="image1.jpg" onload="countMe(this,1)" onerror="countMe(this,0)"/>
 </marquee>

 <script>
 var imageCount = 0, nofImages=$("#marquee img"); 
 function countMe(img,success) {
   if (!success) $(img).hide();
   imageCount++;
   if (imageCount == nofImages) $("#marquee").show();
 }
 </script>

画像にチャンスを与え、永続的なエラーの場合はマーキーをロードしない場合は、試すことができます

<marquee id="marquee" style="visiblity:hidden">
  <img src="image1.jpg" onload="countMe(this)" onerror="reloadMe(this)"/>
  <img src="image2.jpg" onload="countMe(this)" onerror="reloadMe(this)"/>
  <img src="image3.jpg" onload="countMe(this)" onerror="reloadMe(this)"/>
 </marquee>

 <script>
 var imageCount = 0, nofImages=$("#marquee img"); 
 function countMe(img) {
   imageCount++;
   if (imageCount == nofImages) $("#marquee").show();
 }
 function reloadMe(img) {
   var tries = img.getAttribute("tries")?parseInt(img.getAttribute("tries"),10):1;
   if (tries) == 3) return; // stop it
   tries++;
   img.setAttribute("tries",tries);
   img.src=img.src;
 }
 </script>
于 2016-08-26T06:55:58.000 に答える