jQuery를 사용하여 Ajax를 사용하여 깨진 이미지를 대체하십시오

손상된 그림을 jQuery 및 ajax 로 교체하십시오 이 기사는 손상된 이미지 감지 및 삭제에 대한 이전 기사를 확장하고 손상된 이미지를 jQuery 및 Ajax로 대체하는 방법을 심층적으로 탐구합니다. 대부분의 브라우저는 이미지를 찾을 수없는 경우 ALT 태그를 표시합니다. 요소의 출력 폭이 ALT 태그의 길이에 의해 제한되지 않기 때문에 이미지가 작고 ALT 태그가 길다면 문제가 될 수 있습니다. 따라서 손상된 이미지를 기본 이미지로 바꾸는 것이 합리적입니다. 페이지 에서 현재 그림에 대한 정보를 얻으십시오

ajax를 사용하여 이미지가 존재하는지 테스트하십시오

사진을 새로 고쳐 ajax를 사용하여 손상된 사진을 수리하십시오

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

및

가 추가되었습니다.

$("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 기능 버전

위의 내용이 이해하기 쉽기를 바랍니다. 궁금한 점이 있으면 댓글 영역에 메시지를 남겨주세요! :) <.> FAQS (FAQS)는 jQuery를 사용하여 손상된 이미지를 자동으로 복구하기 위해 손상된 사진을 수리하는 jQuery의 기본 개념은 무엇입니까?

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

손상된 이미지를 수리하는 jQuery 수리의 기본 개념은

이벤트를 사용하는 것입니다. 이 이벤트는 외부 파일 (예 : 그림)을로드하는 동안 오류가 발생하면 트리거됩니다. 이미지의 맥락 에서이 이벤트를 사용하여 원본 이미지가로드되지 않으면 이미지의 소스 ( 속성)를 기본 이미지 또는 자리 표시 자 이미지로 바꿀 수 있습니다.

jQuery에서

이벤트를 사용하여 손상된 이미지를 수정하는 방법은 무엇입니까? _this e.status jQuery에서

이벤트를 사용하려면 이미지를 선택하고 이벤트를 바인딩해야합니다. 이벤트 핸들러 기능에서는 이미지 소스를 기본 이미지로 변경할 수 있습니다. 기본 예는 다음과 같습니다.

$(".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;
},

이벤트 핸들러 함수에서

속성 만 수정하면됩니다. 예를 들어, 손상된 이미지를 "eciple.jpg"라는 이미지로 바꾸려면 다음을 수행 할 수 있습니다.

손상된 이미지에 대해 다른 교체 이미지를 사용할 수 있습니까?

예, 손상된 각 이미지에 대해 다른 교체 이미지를 사용할 수 있습니다. 기능을 사용하여 특정 조건에 따라 대체 이미지를 결정하여이를 수행 할 수 있습니다. 예를 들어, 이미지의

속성을 ​​사용하여 대체 이미지를 결정할 수 있습니다.

대체 이미지를 결정하기 위해 이미지의

속성을 ​​사용하는 방법은 무엇입니까?

이벤트 핸들러 함수의 속성에 액세스하여 이미지의 error 속성을 ​​사용하여 대체 이미지를 결정할 수 있습니다. 예는 다음과 같습니다. src 교체 이미지가로드되지 않을 때만 기본 이미지를 사용하려면 어떻게해야합니까?

교체 이미지가로드되지 않을 때 기본 이미지 만 사용하려면

이벤트 핸들러 기능에서 이벤트를 이미지에 다시 바인딩 할 수 있습니다. 예는 다음과 같습니다.

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

페이지의 특정 부분에서 손상된 이미지 에이 방법을 사용할 수 있습니까?

예,이 방법을 페이지의 특정 부분에서 손상된 이미지에 사용할 수 있습니다. 해당 섹션에서 그림을 선택하려면 선택기를 수정하면됩니다. 예를 들어, ID "Content"로 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()); //清除缓存

참고 : 이미지 경로

는 실제 이미지 경로로 교체해야합니다. 로컬 파일 시스템에 액세스 할 수 없으므로 사진을 표시 할 수 없습니다.

위 내용은 jQuery를 사용하여 Ajax를 사용하여 깨진 이미지를 대체하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!