相关疑难解决方法(0)

使用jQuery检查是否加载了图像(没有错误)

我正在使用JavaScript与jQuery库来操作无序列表中包含的图像缩略图.当图像被加载时,它会做一件事,当发生错误时它会做其他事情.我正在使用jQuery load()和error()方法作为事件.在这些事件之后,我检查.complete的图像DOM元素,以确保在jQuery注册事件之前图像尚未加载.

它正常工作,除非在jQuery注册事件之前发生错误.我能想到的唯一解决方案是使用img onerror属性在全局某个地方(或在它自己的节点上)存储一个"标志",表示它失败,因此jQuery可以在检查.complete时检查"存储/节点".

谁有更好的解决方案?

编辑:粗体主要点并在下面添加额外的细节: 我正在检查图像是否完整(也称为加载)我在图像上添加加载和错误事件后.这样,如果在事件被注册之前加载了图像,我仍然会知道.如果在事件之后未加载图像,则事件将在事件发生时进行处理.这个问题是,我可以很容易地检查图像是否已经加载,但我无法判断是否发生了错误.

javascript jquery dom image jquery-events

215
推荐指数
7
解决办法
29万
查看次数

如何使用Javascript/jQuery确定图像是否已加载?

我正在编写一些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)

javascript jquery image

84
推荐指数
4
解决办法
12万
查看次数

标签 统计

image ×2

javascript ×2

jquery ×2

dom ×1

jquery-events ×1