jqueryを使用して、ajaxを使用して壊れた画像を置き換えます

損傷した写真をjQueryとajax

に置き換えます この記事では、破損した画像の検出と削除に関する以前の記事を拡張し、破損した画像をjQueryとajaxに置き換える方法を詳細に調査します。ほとんどのブラウザは、画像が見つからないときにALTタグを表示します。要素の出力幅がALTタグの長さによって制限されることを余儀なくされていないように見えるため、画像が小さく、ALTタグが長い場合、これは問題になる可能性があります。したがって、損傷した画像をデフォルトの画像に置き換えることは理にかなっています。

ページ上の現在の画像に関する情報を取得

$("img").each( function () {
    console.log($(this).attr('src')+ ' ' + $(this).attr('alt') + ' ' + $(this).width());
});

Ajaxを使用して、画像が存在するかどうかをテストします 写真をリフレッシュしてください

$("img").each( function () 
{
    $.ajax({
        url:$(this).attr('src'),
        type:'HEAD',
        error:
            function(){
                //图片不存在
                console.log('ERROR');
            },
        success:
            function(){
                //图片存在
                console.log('success');
            }
    });
});
/*
输出：
success
success
ERROR
success
success
*/

Ajaxを使用して、損傷した写真を修復します

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime()); //清除缓存

と

が追加されていることに注意してください。 _this e.status

非ajax関数バージョン

$(".productBoxImage img").each( function () 
{
    var _this = $(this);

    $.ajax({
        url:$(this).attr('src'),
        type:'HEAD',
        async: false,
        error:
            function(e)
            {
                if (e.status == '404') {
                    $(_this).attr('src',[replaceImageUrl]);
                }
            }
    });
});

上記が理解しやすいことを願っています。ご質問がある場合は、コメントエリアにメッセージを残してください！ ：）

/**
 * 返回true表示图片损坏，false表示图片正常
 * @param {jQuery} image 单个图片元素
 * @return {Boolean}
 */
isImageBroken: function(image)
{
    $image = $(image);
    if($image.attr('complete') == false || $image.attr('naturalWidth') == 0 || $image.attr('readyState') == 'uninitialized' || this.trim($image.attr('src')) == '')
    {
        return true;
    }
    return false;
},

JQueryを使用して破損した画像を自動的に修復する

FAQ（FAQ）

損傷した写真を修復するjQueryの基本的な概念は何ですか？

損傷した画像を修復するjQueryの基本的な概念は、

イベントを使用することです。このイベントは、外部ファイル（画像など）のロード中にエラーが発生したときにトリガーされます。画像のコンテキストでは、このイベントを使用して、元の画像が読み込まれないときに、画像のソース（

属性）をデフォルトの画像またはプレースホルダー画像に置き換えることができます。 error srcjqueryで

イベントを使用して破損した画像を修正する方法は？

error jQueryで

イベントを使用するには、画像を選択して

イベントをそれらにバインドする必要があります。イベントハンドラー機能では、画像のソースをデフォルトの画像に変更できます。基本的な例は次のとおりです error error損傷した画像ごとに特定の画像を置き換えて使用できますか？

$('img').error(function(){
  $(this).attr('src', 'default.jpg');
});

はい、特定の画像を各損傷した画像の代替として使用できます。イベントハンドラー関数の

属性を変更するだけです。たとえば、損傷した画像を「speciety.jpg」という名前の画像に置き換える場合は、これを行うことができます。

損傷した画像ごとに別の交換画像を使用することは可能ですか？ error srcはい、損傷した画像ごとに異なる交換画像を使用できます。これを行うには、関数を使用して、特定の条件に基づいて置換画像を決定できます。たとえば、画像の

属性を使用して、置換画像を決定できます。

$('img').error(function(){
  $(this).attr('src', 'specific.jpg');
});

画像の

属性を使用して置換画像を決定する方法は？

alt

イベントハンドラー関数の

属性にアクセスして、画像のalt属性を使用することにより、交換画像を決定できます。例は次のとおりです。

error置換画像がロードに失敗した場合にのみ、デフォルトの画像を使用したい場合はどうなりますか？ alt alt置換画像がロードに失敗した場合にのみデフォルトの画像を使用する場合は、

イベントハンドラー関数のイベントに再び画像にバインドできます。例は次のとおりです。

$('img').error(function(){
  var alt = $(this).attr('alt');
  $(this).attr('src', alt + '.jpg');
});

$("img").each( function () {
    console.log($(this).attr('src')+ ' ' + $(this).attr('alt') + ' ' + $(this).width());
});

この方法をページの特定の部分で破損した画像に使用できますか？

はい、この方法をページの特定の部分で破損した画像に使用できます。そのセクションの写真を選択するためにセレクターを変更するだけです。たとえば、ID「コンテンツ」を備えたDIV内の画像を修正する場合は、これを行うことができます。

$("img").each( function () 
{
    $.ajax({
        url:$(this).attr('src'),
        type:'HEAD',
        error:
            function(){
                //图片不存在
                console.log('ERROR');
            },
        success:
            function(){
                //图片存在
                console.log('success');
            }
    });
});
/*
输出：
success
success
ERROR
success
success
*/

画像が置き換えられたかどうかを知る方法はありますか？

はい、画像が置き換えられているかどうかを知る方法があります。イベントハンドラー機能の画像にクラスを追加できます。その後、このクラスを使用して、交換用の画像をスタイリングするか、さらに処理するためにそれらを選択できます。例は次のとおりです。

error

この方法を使用して、ページに動的に追加された損傷した画像を修正できますか？

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime()); //清除缓存

はい、この方法を使用して、ページに動的に追加された損傷した画像を修正できます。

メソッドの代わりに

メソッドを使用して、onイベントをバインドする必要があります。この方法を使用すると、イベントハンドラーをセットアップした後、イベントをページに追加した要素にバインドできます。例は次のとおりです。error error

画像の交換以外に、画像がロードされなかったときに他の操作を実行したい場合はどうなりますか？

$(".productBoxImage img").each( function () 
{
    var _this = $(this);

    $.ajax({
        url:$(this).attr('src'),
        type:'HEAD',
        async: false,
        error:
            function(e)
            {
                if (e.status == '404') {
                    $(_this).attr('src',[replaceImageUrl]);
                }
            }
    });
});

画像の読み込みに失敗したときに他の操作を実行したい場合は、

イベントハンドラー関数にコードを追加できます。たとえば、メッセージをコンソールにログに記録できます。

error

/**
 * 返回true表示图片损坏，false表示图片正常
 * @param {jQuery} image 单个图片元素
 * @return {Boolean}
 */
isImageBroken: function(image)
{
    $image = $(image);
    if($image.attr('complete') == false || $image.attr('naturalWidth') == 0 || $image.attr('readyState') == 'uninitialized' || this.trim($image.attr('src')) == '')
    {
        return true;
    }
    return false;
},

注：画像パスは、実際の画像パスに置き換える必要があります。 ローカルファイルシステムにアクセスできないため、画像を表示できません。

以上がjqueryを使用して、ajaxを使用して壊れた画像を置き換えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。