jquery在.load（）函数中重新建立img src

| 我试图弄清楚如果图像src路径无效或找不到图像，则如何重新建立img src。我有一个动态创建的img src路径，有时可能指向没有实际图像的目录。在这种情况下，我需要将src更改为“ 0”。我这样做是没有运气的： 
$(\'.imgContainer\').append( \"<img id=\'pic\' src=\'/dynamically/created/path/to/img.jpg\'>\" );
$(\'.imgContainer img#pic\').load(function(){
     if( $(this).width() == 0 && $(this).height() == 0 ){
        $(this).attr({src: \'img/missing.jpg\'})
               .css({width:\'100px\', height:\'100px\'});
     }
 });
也许有一种更好的方法可以执行此操作-但我不知道...我尝试使用
$(this).onerror = //some function
，但也无法弄清楚该如何工作。 任何帮助将不胜感激...     
2020-01-22 2 条评论
分享

没有找到相关结果

    已邀请:

    哭木算

            问题的关键在于\'load \'事件仅在成功加载图像后才在图像上触发-因此，如果您指定了无效路径，则将永远不会发生load事件。您需要改为使用\'error \'处理程序，如下所示： 
    var img = $(\"<img id=\'pic\' src=\'/dynamically/created/path/to/img.jpg\'>\")
 .error(function(){
        $(this).attr({src: \'img/missing.jpg\'})
               .css({width:\'100px\', height:\'100px\'});
 })
 .appendTo(\'.imgContainer\');
    我已经简化了代码-顺序是：创建图像元素，绑定错误事件处理程序，然后附加到文档。我不知道这是否有任何实际的区别，但是在图像有机会开始加载之前设置处理程序似乎更有意义（否则加载理论上可以在分配事件之前发生）。 另外，对宽度== 0和高度== 0的检查将无法在所有浏览器中使用。 Chrome和Safari都为您显示的“残破的图像”图标的宽度和高度：18x18px。     
    2020-01-22 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册