jQuery img onload是一個用于圖片加載事件的jQuery函數。當圖片成功加載時,可以執行某些操作。
$(document).ready(function(){ $("img").on('load', function(){ console.log("圖片已成功加載!"); }); });
在上面的代碼中,當頁面中的圖片加載完成后,會輸出“圖片已成功加載!”
該函數還可以用于處理一些與圖片大小相關的問題。例如,當圖片加載完成后可以自動縮放圖片大小,以適應容器的大?。?/p>
$(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); }); });
在上面的代碼中,如果圖片寬度或高度超過容器的最大限制,則會按比例縮小圖片大小。
總之,jQuery img onload是一個非常有用的函數,可以處理圖片加載成功后的操作,并且可以輕松縮放圖片大小。