-2

私は fancybox を使用していますが、ほとんどの場合、一部の画像がユーザーに読み込まれません。画像が常に読み込まれるようにするにはどうすればよいですか?そうでない場合は、ページなどをリロードできますか?

4

8 に答える 8

6

まず、これらの画像が読み込まれない理由を突き止める必要があります。FireFox の FireBug などの開発者ツールや、他のユーザー向けの組み込みツールを使用して、ネットワーク アクティビティを監視します。ステータス列には、サーバー側に関連する問題があるかどうかが示されます。

于 2012-11-13T10:34:18.660 に答える
2

画像のピクセルデータをx=1 y=1変数に保存し、それが一致することを確認し、再読み込みしない場合は。これは、ユーザーがhtml5キャンバスをサポートしている場合にのみ機能します。私の意見では、すべてのユーザーのブラウザを実行させるのは一種の不必要な作業負荷です。

これにより、必要な情報が得られます。

var colorOfSomeImage = colorvalue
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
imageExists = pixel ==
于 2012-11-04T18:34:39.673 に答える
2

以下のようにしjavascriptて、画像が完全にロードされたかどうかを確認できます。

objImg = new Image();
objImg.src = 'photo.gif';
objImg.onload = function() {
                           /// do some work;
                        }
if(!objImg.complete)
 {
        /// do other work;
             }

onerror次のような画像イベントを使用することもできます。

<img src="image.gif" onerror="handleError(this);"> 
function handleError(image){
    //do some thing else
}
于 2012-11-11T18:25:04.580 に答える
2

fancybox のエラー テンプレートを設定できます。

$('.fancybox').fancybox({
    tpl: {error: '<script>window.location = window.location;</script>'}
});

このようにして、画像の読み込みに失敗した場合、エラー テンプレートによってページが再読み込みされます。

于 2012-11-12T22:42:56.973 に答える
1

Fiddler / FireFugまたは Chrome の組み込みツール (F12 を押して [ネットワーク] をクリックし、ページをリロードして監視) を使用してネットワーク リクエストを監視し、画像 URL へのリクエストが正しく、それらが読み込まれているかどうかを確認します。200 OK ステータスまたは 304 Not Modified(Cache)を取得することを意味します

パスの問題で実行している場合は、「http://yoursite.com/images/img.jpg」のような絶対パスを使用して確認してください

サーバーにすべての画像が存在し、プロキシ サーバーによって画像要求がブロックされていないことを確認してください。

これが役立つことを願っています！

于 2012-11-16T08:32:03.833 に答える
1

Janis が指摘したように、開発者ツールを使用して Net セクションを監視します。サーバー側の問題である可能性があります。

また、以前に複数回バインドされたファンシーボックスに関係していた問題-これにより、断続的な問題が発生します。

于 2012-11-16T04:22:18.497 に答える
1

クラスを使用して、すべての画像に.error()-Funktionを追加できます。次に、Ajax-Call をサーバーに戻して、欠落しているソースを取得します。

このようなもの：

<img src="image.gif" class="imageClass">

その後：

$.each($(".imageClass"), function(index, obj){
 $(obj).error(function() {
  //Your Ajax-Call
 }));
});

Ajax 呼び出しについては、JQuery-Doc を参照してください。

于 2012-11-18T11:27:48.097 に答える
1

これはややこしいです。タスクには JavaScript を使用できます。loadImage などの関数を作成します。

$.fn.loadImage = function(fn){
    this.load(fn);
    this.each( function() {
        if ( this.complete && this.naturalWidth !== 0 ) {
            $(this).trigger('load');
        }
    });
}

上記のコードは、スクリプトが実行される前に画像の読み込みが完了している場合にも対応しています。これは、マークアップで画像を定義するときに発生する可能性があります。

<img src='http://example.com/img.png'/>

ファンシーボックスを開くときはいつでも、次のJavaScriptをトリガーします

$('img').loadImage(function(){
    //open fancybox
 });

あなたが何をしていても、頑張ってください！

于 2012-11-11T18:48:35.780 に答える