我正在编写一些Javascript来调整大图像的大小,以适合用户的浏览器窗口。(不幸的是,我没有控制源图像的大小。)
因此,HTML中将包含以下内容:
<img id="photo" src="a_really_big_file.jpg" alt="this is some alt text" title="this is some title text" />
我是否可以确定 标签中的src图像img是否已下载?
src
img
我需要这样做,因为如果$(document).ready()在浏览器加载图像之前执行该命令,就会遇到问题。 $("#photo").width()并$("#photo").height()返回占位符的大小(替代文本)。就我而言,这大约是134 x 20。
$(document).ready()
$("#photo").width()
$("#photo").height()
现在,我只是在检查照片的高度是否小于150,并假设是alt文字。但这是一个很不错的技巧,如果照片的高度小于150像素(在我的特定情况下不太可能),或者替换文字的高度大于150像素(可能发生在小的浏览器窗口中),它就会中断。
编辑: 对于任何想要查看代码的人:
$(function() { var REAL_WIDTH = $("#photo").width(); var REAL_HEIGHT = $("#photo").height(); $(window).resize(adjust_photo_size); adjust_photo_size(); function adjust_photo_size() { if(REAL_HEIGHT < 150) { REAL_WIDTH = $("#photo").width(); REAL_HEIGHT = $("#photo").height(); if(REAL_HEIGHT < 150) { //image not loaded.. try again in a quarter-second setTimeout(adjust_photo_size, 250); return; } } var new_width = . . . ; var new_height = . . . ; $("#photo").width(Math.round(new_width)); $("#photo").height(Math.round(new_height)); } });
更新 :感谢您的建议。如果我为$("#photo").load事件设置回调,则存在事件未触发的风险,因此我直接在image标签上定义了onLoad事件。作为记录,这是我最终使用的代码:
$("#photo").load
<img id="photo" onload="photoLoaded();" src="a_really_big_file.jpg" alt="this is some alt text" title="this is some title text" />
然后在Javascript中:
//This must be outside $() because it may get called first var isPhotoLoaded = false; function photoLoaded() { isPhotoLoaded = true; } $(function() { //Hides scrollbars, so we can resize properly. Set with JS instead of // CSS so that page doesn't break with JS disabled. $("body").css("overflow", "hidden"); var REAL_WIDTH = -1; var REAL_HEIGHT = -1; $(window).resize(adjust_photo_size); adjust_photo_size(); function adjust_photo_size() { if(!isPhotoLoaded) { //image not loaded.. try again in a quarter-second setTimeout(adjust_photo_size, 250); return; } else if(REAL_WIDTH < 0) { //first time in this function since photo loaded REAL_WIDTH = $("#photo").width(); REAL_HEIGHT = $("#photo").height(); } var new_width = . . . ; var new_height = . . . ; $("#photo").width(Math.round(new_width)); $("#photo").height(Math.round(new_height)); } });
添加事件侦听器,或让图像通过onload声明自身。然后从那里找出尺寸。
<img id="photo" onload='loaded(this.id)' src="a_really_big_file.jpg" alt="this is some alt text" title="this is some title text" />