Question

我已经检测到损坏的图像并且破坏了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的控制台日志中我可以看到对象和srcs 他们但是当ajax发送它们并将它们捕获到php中时没有broken_src

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

});

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

Answer 1

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

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

＆＃13;

$(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);
            }
        });
    }

});

＆＃13;

<!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>

＆＃13;

Answer 2

$('img').error抛出异常的原因是$('img').error实际上不是函数。但是，如果您想捕获图像加载失败，可以使用onerror，如下所示：

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

检测损坏的图像并使用jquery

2 个答案: