使用 jquery 检测损坏的图像并获取 src答案

【问题标题】：Detect broken image and get src's using jquery使用 jquery 检测损坏的图像并获取 src
【发布时间】：2018-05-15 11:01:04
【问题描述】：

我检测到损坏的图像和损坏的 src 并将它们存储到对象中但无法将它们存储到对象中，因为我认为错误函数和将它们捕获到对象之间存在时间差，请检查我的代码。

我成功获得了 src 但无法将它们存储在对象变量中并通过 ajax 将它们传递到后端。我认为通过调试测试它

brokenImages.current_url = currentUrl;  
brokenImages.broken_src = brokenSrc;

在错误函数之前运行，但在 brokenImages 变量中什么也没有。

jQuery(document).ready(function($){

        //Check Image Error
        var i = 0;
        var currentUrl = window.location.href;
        var brokenImages = new Object();
        var brokenSrc = new Object();


        $('img').on('error', function(event){

            var link = event.target.src;

            console.log('check '+link + ' num ' + i);

            brokenSrc[i] = link;

            i++;
        });

        //alert(brokenSrc);

        //Like if I put alert brokenSrc object here I get them in ajax and php

        console.log(' broken src ');
        console.log(brokenSrc);

        brokenImages.current_url = currentUrl;  
        brokenImages.broken_src = brokenSrc;

        console.log( ' broken images ' );
        console.log(brokenImages);

//在chrome和firefox的控制台日志中可以看到object和srcs 他们但是当 ajax 发送它们并将它们捕获到 php 中时没有任何损坏的_src

        //Sent Script Data
        $.ajax({
            type: "POST",
            url: ajax_url,
            data: {
                imageData: brokenImages
            },
            success: function(result){
                console.log(result);
            }
        });

});

在成功获取它们时无法将它们存储在 brokenImages 变量中。

【问题讨论】：

api.jquery.com/error 您是否在问如何在不先检查文档的情况下修复error() 调用？这真的不是stackoverflow的工作方式。问一个问题应该是绝对的最后手段。 jsfiddle.net/4n3f3sbr/1
@ChrisG 不，我不是在问这个错误函数正在运行，我成功收到错误但无法进入对象并将它们传递到后端，因为将它们分配给在错误函数之前运行的对象。请帮忙

标签： javascript jquery ajax broken-links broken-image

【解决方案1】：

.error 已弃用，需要改用.on('event'。

允许error 是异步的，您的代码不会等待加载图像来发送损坏图像的最终报告。 img 上的空 src 属性也不会触发错误或成功，您需要单独忽略或添加它们。我在下面的代码中忽略了它们。

$(document).ready(function() {

    //Check Image Error
    var i = 0;
    var brokenSrc = [];

    var totalImagesOnPage = $('img').not( "[src='']" ).length;

    $('img').on('load', function() {
        increaseCount();
    }).on('error', function() {
        var link = $(this).attr('src');
        console.log('broken link : ' + link);
        brokenSrc.push(link);
        increaseCount();
    });


    function increaseCount() {
        i++;
        if (i == totalImagesOnPage) {
            finishedLoadingImages();
        }
    }

    function finishedLoadingImages() {
        console.log("Broken images ::", brokenSrc);
        $.ajax({
            type: "POST",
            url: '/',
            data: {
                imageData: {
                    current_url: window.location.href,
                    broken_src: brokenSrc
                }
            },
            success: function(result) {
                console.log(result);
            }
        });
    }

});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>


<img src="" />
<img src="http://google.com" />
<img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/05/1399880336proe-pic_400x400-96x96.jpg" />
<img src="https://simplyaccessible.com/wordpress/wp-content/themes/sa-wp-2014/images/logo.svg"/>

 </body>
</html>

【讨论】：

这里是工作代码jsbin.com/cizetovuvo/2/edit?html,js,console,output的jsbin链接
非常感谢@Shivaji Varma，但面临的一个问题 on('load') 没有运行，也没有在 chrome 中增加计数，但在 Firefox 中它正在运行。
您使用的是哪个版本的 chrome？因为我使用的是 chrome，所以它起作用了。
版本 66.0.3359.139
添加 setTimeout 作为备份。jsbin.com/yomamigubi/1/edit?html,js,console,output

【解决方案2】：

$('img').error 抛出异常的原因是$('img').error 真的不是一个函数。但是，如果您想捕获图像加载失败，您可以像这样使用onerror：

$(function(){
  var error_object_array = [];
  $('img').on('error', function(event) {
    error_object_array.push(event.target.src);
  });
})

【讨论】：

我已经使用了您的建议，但无法将它们放入对象数组中。我在控制台中得到它们，但不像在 ajax 和 php 中那样真实
因为 brokenImages.current_url = currentUrl; brokenImages.broken_src = brokenSrc;在 .on('error') 之前运行
@user3278839 这有点棘手。您需要在$(function(){ 范围内创建对象数组。然后您的错误处理程序会将损坏的图像链接存储到数组中，并在填充后使用该数组。
@lkp111138 你能像你说的那样编辑你的答案解决我的问题
或者您可能希望在每次运行处理程序时$.post，因为似乎没有“所有内容都已完成加载”事件。