javascript - 在图像上使用 load() 方法时不显示警报

Question

$('#rafale').load(function (){   	
    alert('hello');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<img id="rafale" src="https://signup.na.leagueoflegends.com/theme/signup_new_theme/img/logo-lol.png" alt="Rafale Jet" >

上面的代码用于在加载图像后显示一个警报框，但它没有显示。相反，它给出了一个错误:

jquery-3.1.1.min.js:4 Uncaught TypeError: a.indexOf is not a> function(…)

Answer 1

该问题是由于 jQuery v3.x 中 load() 方法的修改所致。它不再创建 load 事件处理程序，而是尝试发出 AJAX 请求以将内容加载到所选元素中 - 因此错误是由于缺少参数而引起的。

要执行您需要的操作，请改用 on('load', fn)。试试这个:

$('#rafale').on('load', function(){      
    alert('hello');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img id="rafale" src="https://i.imgur.com/F5iJY.jpg" alt="Rafale Jet" >

请注意，我将图像源更改为有效位置，以便事件正确触发。您需要 Hook error 事件来捕获 404 和其他响应代码。