我正在使用JavaScript与jQuery库来操作无序列表中包含的图像缩略图.当图像被加载时,它会做一件事,当发生错误时它会做其他事情.我正在使用jQuery load()和error()方法作为事件.在这些事件之后,我检查.complete的图像DOM元素,以确保在jQuery注册事件之前图像尚未加载.
它正常工作,除非在jQuery注册事件之前发生错误.我能想到的唯一解决方案是使用img onerror属性在全局某个地方(或在它自己的节点上)存储一个"标志",表示它失败,因此jQuery可以在检查.complete时检查"存储/节点".
谁有更好的解决方案?
编辑:粗体主要点并在下面添加额外的细节: 我正在检查图像是否完整(也称为加载)我在图像上添加加载和错误事件后.这样,如果在事件被注册之前加载了图像,我仍然会知道.如果在事件之后未加载图像,则事件将在事件发生时进行处理.这个问题是,我可以很容易地检查图像是否已经加载,但我无法判断是否发生了错误.
我正在编写一些Javascript来调整大图像的大小以适应用户的浏览器窗口.(遗憾的是,我无法控制源图像的大小.)
所以类似这样的东西将在HTML中:
<img id="photo"
src="a_really_big_file.jpg"
alt="this is some alt text"
title="this is some title text" />
Run Code Online (Sandbox Code Playgroud)
有没有办法让我确定标签中的src图像img是否已下载?
我需要这个,因为如果$(document).ready()在浏览器加载图像之前执行,我遇到了问题. $("#photo").width()并且$("#photo").height()将返回占位符(alt文本)的大小.在我的情况下,这是像134 x 20.
现在我只是检查照片的高度是否小于150,并假设如果是这样,它只是替代文字.但这是一个非常黑客,如果一张照片的高度低于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 = . . …Run Code Online (Sandbox Code Playgroud)