是否使用JS/jQuery检查加载时和出错时?

mdfafbf1  于 2022-11-03  发布在  jQuery
关注(0)|答案(3)|浏览(92)

使用HTML,我可以手动将其放入正文中

<img style="display:none;"
onload="Success('test')"
onerror="Fail('test')"
src="http://example.com/test.png"
/>

是否可以使用jQuery或JavaScript执行此检查?
编辑:我想避免使用HTML和手动插入图片。我试图只使用jQuery/JS完成检查。

iaqfqrcu

iaqfqrcu1#

是的...在jQuery中也是这样

​$('img').load(function(){ // when loaded successfully
   console.log('success');  
}).error(function(){  // when theres an error
   console.log('error');  
});​​​​​

FIDDLE

$('img').on({
    load: function(){

    }, 
    error: function(){

    }
})

FIDDLE

编辑:

如果你想用纯javascript编写,你可以这样做

$('<img/>',{ // <-- create the element
      src:'http://wichitaatbat.com/wp-content/uploads/Soccer-Ball.png'
}).load(function(){
    console.log('success');
}).error(function(){
    console.log('error');  
});

http://jsfiddle.net/wirey00/LCkkn/

sd2nnvve

sd2nnvve2#

对于error,jquery的工作方式如下:

$('img').on('error', function(e) {

});

对于load相同:

$('img').on('load', function(e) {

});
nr9pn0ug

nr9pn0ug3#

您可以使用纯JavaScript执行此操作,如下所示:

<script language="JavaScript">

    var img = new Image();   // Create new image element

    img.onload = function(){
      // your code
    };

    img.onerror = function() {
      // your code
    };

    img.src = 'yourImage.png'; // Set source path

</script>

你可以试试这种方法here

相关问题