javascript 如何使用javascript检查图像url是否为404

How to check image url is 404 using javascript

提问by afeef

Use Case:

用例：

1. when src is not null and alt tag is not null then show image of src.
2. then check src image url is not 404.
3. when src is null and alt is not null the show image of first name.
4. when src and alt are null then show default image

1. 当 src 不为空且 alt 标签不为空时，则显示 src 的图像。
2. 然后检查 src 图像 url 不是 404。
3. 当 src 为空且 alt 不为空时，显示名字的图像。
4. 当 src 和 alt 为空时，则显示默认图像

HTML:

HTML：

<img class="imagelazy" id="lazyimage" src="http://url" alt="ankit">

Javascript:

Javascript：

function imagelazy() {

    $(document).ready(function()

        {
            var image = $(".imagelazy").attr('src');
            var altdata = $(".imagelazy").attr('alt');
            var alt = $(".imagelazy").attr('alt').split("");
            //var imagepath="http://im.gifbt.com/userimages/"+alt[0].toLowerCase()+".jpg";
            var defaultimage = "http://im.gifbt.com/img/no-pic.jpg";
            console.log(image);
            console.log(alt);
            $(".imagelazy img")
                .error(function() {
                    $(this).hide();
                })
                .attr("src", defaultimage);

            if (image != '' && altdata != '') {
                console.log("afeef");
                $('.imagelazy').bind('error', function() {
                    $(this).attr("src", defaultimage);
                });
                $(".imagelazy img")
                    .error(function() {
                        $(this).hide();
                    })
                    .attr("src", defaultimage);


            } else if (image == '' && altdata != '') {
                $.each($('.imagelazy'), function(index, value) {
                    var alt1 = $(this).attr('alt').split("");
                    console.log(alt1);
                    if (alt1 != '') {
                        var imagepath1 = "http://im.gifbt.com/userimages/" + alt1[0].toLowerCase() + ".jpg";
                    }
                    console.log(this.outerHTML);
                    console.log(imagepath1);
                    $(this).attr("src", imagepath1);
                });


            } else if (altdata == '' && image == '') {
                $.each($('.imagelazy'), function(index, value) {
                    $(this).attr("src", defaultimage);
                    console.log(this.outerHTML);
                });
            }

        });
}

Problem

问题

• Script is not working when scrolling down the page.
• When the image is set in src and alt tag is set then also first name image is displayed.
• onerroris not working in js.
• i have googled a lot coudln"t found the solution for this issue.
• i have found lazy.min.js js which set src="" and data-src="pathimage" would handled this issue.

• our requirement is optimize html that why im searching for alternate solution through js.

• i have found jquery link : https://api.jquery.com/error/

• 向下滚动页面时脚本不起作用。
• 当在 src 中设置图像并设置 alt 标签时，还会显示名字图像。
• onerror不在 js 中工作。
• 我在谷歌上搜索了很多都没有找到解决这个问题的方法。
• 我发现设置 src="" 和 data-src="pathimage" 的 lazy.min.js js 可以处理这个问题。

• 我们的要求是优化 html，这就是为什么我要通过 js 寻找替代解决方案。

• 我找到了 jquery 链接：https: //api.jquery.com/error/

回答by Arun Kumar

jQuery Ajax:

jQuery Ajax：

$.ajax({
    url:'http://www.example.com/somefile.ext',
    type:'HEAD',
    error: function()
    {
        //file not exists
    },
    success: function()
    {
        //file exists
    }
});

Javascript:

Javascript：

function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

Image check:

图像检查：

function ImageExist(url) 
{
   var img = new Image();
   img.src = url;
   return img.height != 0;
}

Other:

其他：

$.get(url)
    .done(function() { 
        // exists code 
    }).fail(function() { 
        // not exists code
    })

HTML:

HTML：

<img src="image.gif" onerror="imgError()" />

function imgError()
{
alert('The image could not be loaded.');
}

回答by Jai

isn't this selector is wrong:

这个选择器是不是错了：

$(".imagelazy img")

This should be either:

这应该是：

$("img.imagelazy")

or just image class name:

或者只是图像类名称：

$(".imagelazy")

---

---

And also you don't have to wrap the doc ready block in any function block. and you can optimize your code like:

而且您不必将文档就绪块包装在任何功能块中。你可以优化你的代码，比如：

$('.imagelazy').attr('src', function() {
    var alt1 = $(this).attr('alt').split("");
    if (alt1 != '') {
       var imagepath1 = "http://im.gifbt.com/userimages/" + alt1[0].toLowerCase() + ".jpg";
    }

    return imagepath1;
});

回答by Vishnu Atrai

Use onerrorevent of HTML imgtag for 2,3 and 4th scenerio. http://www.w3schools.com/jsref/event_onerror.asp

对第 2,3 和第 4 个场景使用onerrorHTMLimg标记的事件。http://www.w3schools.com/jsref/event_onerror.asp

<img src="invalid_link" onerror="this.onerror=null;this.src='https://www.google.com/images/srpr/logo11w.png';" alt="">