jQuery img onload是一個(gè)用于圖片加載事件的jQuery函數(shù)。當(dāng)圖片成功加載時(shí),可以執(zhí)行某些操作。
$(document).ready(function(){ $("img").on('load', function(){ console.log("圖片已成功加載!"); }); });
在上面的代碼中,當(dāng)頁面中的圖片加載完成后,會(huì)輸出“圖片已成功加載!”
該函數(shù)還可以用于處理一些與圖片大小相關(guān)的問題。例如,當(dāng)圖片加載完成后可以自動(dòng)縮放圖片大小,以適應(yīng)容器的大小:
$(document).ready(function(){ $("img").on('load', function(){ var maxWidth = 200; var maxHeight = 150; var ratio = 0; var width = $(this).width(); var height = $(this).height(); if(width >maxWidth){ ratio = maxWidth / width; height = height * ratio; width = width * ratio; } if(height >maxHeight){ ratio = maxHeight / height; width = width * ratio; height = height * ratio; } $(this).css("width", width); $(this).css("height", height); }); });
在上面的代碼中,如果圖片寬度或高度超過容器的最大限制,則會(huì)按比例縮小圖片大小。
總之,jQuery img onload是一個(gè)非常有用的函數(shù),可以處理圖片加載成功后的操作,并且可以輕松縮放圖片大小。