Question

我正在做一个Ajax查询，它将一个充满~50个URL的JSON数组拉回到图像中。然后，我在数组上使用forEach生成与其他<div>嵌套的<div>，其中一个<div>在我设置的地方持有<img>元素src等于forEach次迭代中的当前网址。

问题是一些网址已经死了，导致<img>元素损坏（你知道，翻录文件的小图片？）。所以我所做的是，在迭代期间，当我创建<img>元素时，我将onerror属性设置为等于"$(this).closest('.gramDiv').remove()"，它会尝试删除某个<img>父项元素和所有父母的孩子。这有效，但我觉得这有点像hacky，而不是最佳实践。有更标准化的方法吗？

$(document).ready(function(){
    console.log("Ready");


        function adder(data,status){

            data.forEach((url,index)=>{
                let attrObj = {
                    src: url,
                    alt: 'photo ' + index, 
                    onerror: "$(this).closest('.targetDiv').remove()"
                };

                let img = $('<img>').attr(attrObj);

                let targetDiv = $('<div></div>').addClass('target');
                let picDiv = $('<div></div>').addClass('picDiv').append(img);

                let component = targetDiv.append(picDiv);

                $('#bodyDiv').append(component);
            })
        }  

        $.ajax({
            url:'https:/blahblahblah.json',
            dataType: 'json',
            success: adder,
            timeout: 3000,
            error: function(){ alert('error retrieving')}
        });


})

Answer 1

您可以尝试使用此代码

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

来自here

Answer 2

感谢@SabirAmeen和link这个答案。

基本上，在forEach块中，您希望对当前迭代的URL运行另一个ajax调用，并检索它的status，这表示它是否正常工作或已损坏。在我的情况下，工作status是200，以及我认为已经破坏的任何其他内容。

我从上面简化了我的代码，但它仍然说明了这一点：

$(document).ready(function(){
    console.log("Ready");


        //event.preventDefault();
        console.log("pressed");

        function adder(data,status){

            data = data.reduce(function(a,b){
                if(!a.includes(b)) a.push(b);
                return a;
            },[]);

            data.forEach((url,index)=>{             

                UrlExists(url, function(status){
                    if(status === 200){
                       // file was found
                       console.log('found:',status);
                       let img = $('<img>').attr('src',url);
                       $('body').append(img);
                    }
                    else {
                       // do nothing
                       console.log('not found:',status);
                    }
                });
            })
        }

        function UrlExists(url, cb){
            jQuery.ajax({
                url:      url,
                dataType: 'text',
                type:     'GET',
                complete:  function(xhr){
                    if(typeof cb === 'function')
                       cb.apply(this, [xhr.status]);
                }
            });
        }

        $.ajax({
            url:'https://yaddayadda.json',
            dataType: 'json',
            // success: adder,
            success: adder,
            //complete: remover,
            timeout: 3000,
            error: function(){ alert('error retrieving data fam')}
        });

})

如果img src坏了，删除父元素和所有子元素

2 个答案: