3、檢查圖像是否加載
有時為了繼續腳本,你可能需要檢查圖像是否全部加載完畢:
$('img').load(function () {
console.log('image load successful');
});
你也可以用ID或類替換<img>標簽來檢查某個特定的圖像是否被加載。
4、自動修復破壞的圖像
逐個替換已經破壞的圖像鏈接是非常痛苦的。不過,下面這段簡單的代碼可以幫助你:
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});
即使沒有任何斷掉的鏈接,加上這一段代碼也不會讓你有任何損失。
5、懸停切換類
假設你希望當用戶將鼠標懸停在可點擊的元素上時,它會改變顏色。那么你可以在用戶懸停的時候添加類到元素中,反之則刪除類:
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
你只需要添加必要的CSS即可。更簡單的方法是使用toggleClass 方法:
$('.btn').hover(function () {
$(this).toggleClass('hover');
});
注:可能在這種情況下,CSS這種解決方案更快,不過了解這個方法很有必要。