检测损坏的图像并使用jquery获取src [英] Detect broken image and get src's using jquery
问题描述
我已经检测到损坏的图像并且破坏了src并将它们存储到对象中但无法将它们存储到对象中，因为我认为错误功能与将它们捕获到对象之间存在时间差异请检查我的代码。
I have detected broken images and getting broken src's and store them into the object but unable to store them into an object because of I think there is a time difference between error function and catching them into object please check my code.
我成功获得src但无法将它们存储在对象变量中并通过ajax将它们传递到后端。通过调试测试，我认为
I successfully get src but unable to store them in object variable and passing them into backend via ajax. By debugging testing it I think
brokenImages.current_url = currentUrl;
brokenImages.broken_src = brokenSrc;
在错误函数之前运行，我在brokenImages变量中什么也得不到。
Run before error function and I get nothing in brokenImages variable.
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
//In console log of chrome and firefox I can see object and srcs in them but when ajax sending them and catching them into php there is nothing broken_src
//Sent Script Data
$.ajax({
type: "POST",
url: ajax_url,
data: {
imageData: brokenImages
},
success: function(result){
console.log(result);
}
});
});
成功获取它们时无法将它们存储在brokenImages变量中。
Unable to store them in brokenImages variables while successfully getting them.
推荐答案
.error 已弃用，需要使用 .on（'event'而不是。
.error is deprecated, need to use .on('event' instead.
允许错误是异步的，你的代码不等待图片获取加载以发送损坏图像的最终报告。在img上的空src属性也不会触发错误或成功，你需要单独忽略或添加它们。我在下面的代码中忽略了它们。
Allow error is asynchronous, your code is not waiting for images to get loaded to send final report of broken images. Also empty src attribute on img will not trigger error or success, you need to ignore or add them separately. I have ignored them in below code.
$(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>
这篇关于检测损坏的图像并使用jquery获取src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
