Обнаружить поврежденное изображение и получить SRC с помощью JQuery - PullRequest
Новая
       58

Обнаружить поврежденное изображение и получить SRC с помощью JQuery

0 голосов
/ 15 мая 2018

Я обнаружил испорченные изображения и получаю испорченные исходные коды и сохранил их в объекте, но не смог сохранить их в объекте, потому что я думаю, что есть разница во времени между функцией ошибки и перехватом их в объекте, пожалуйста, проверьте мой код.

Я успешно получил 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, ничего не сломано

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

.error устарело, вместо этого нужно использовать .on('event'.

Разрешить error асинхронно, ваш код не ожидает загрузки изображений для отправки окончательного отчета о поврежденных изображениях.Также пустой атрибут src в img не приведет к ошибке или успеху, их нужно игнорировать или добавлять отдельно.Я проигнорировал их в приведенном ниже коде. 

$(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>
0 голосов
/ 15 мая 2018

Причина, по которой $('img').error вызывает исключение, заключается в том, что $('img').error на самом деле не является функцией. Однако, если вы хотите отловить сбои при загрузке изображения, вы можете использовать onerror, например: 

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