-1

我检测到损坏的图像和损坏的 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 的控制台日志中，我可以在其中看到对象和 src，但是当 ajax 发送它们并将它们捕获到 php 中时，没有任何 broken_src

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

});

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

4

2 回答 2

3

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

Allowerror是异步的，您的代码不会等待加载图像来发送损坏图像的最终报告。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>

于 2018-05-15T11:38:47.413 回答
0

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

$(function(){
  var error_object_array = [];
  $('img').on('error', function(event) {
    error_object_array.push(event.target.src);
  });
})
于 2018-05-15T11:07:43.133 回答