我正在使用JavaScript与jQuery库来操作无序列表中包含的图像缩略图.当图像被加载时,它会做一件事,当发生错误时它会做其他事情.我正在使用jQuery load()和error()方法作为事件.在这些事件之后,我检查.complete的图像DOM元素,以确保在jQuery注册事件之前图像尚未加载.
它正常工作,除非在jQuery注册事件之前发生错误.我能想到的唯一解决方案是使用img onerror属性在全局某个地方(或在它自己的节点上)存储一个"标志",表示它失败,因此jQuery可以在检查.complete时检查"存储/节点".
谁有更好的解决方案？
编辑:粗体主要点并在下面添加额外的细节: 我正在检查图像是否完整(也称为加载)我在图像上添加加载和错误事件后.这样,如果在事件被注册之前加载了图像,我仍然会知道.如果在事件之后未加载图像,则事件将在事件发生时进行处理.这个问题是,我可以很容易地检查图像是否已经加载,但我无法判断是否发生了错误.
根据规范,只有BODY和FRAMESET元素提供了一个"onload"事件来附加,但我想知道什么时候动态创建的DOM元素已经添加到JavaScript中的DOM.
我目前正在使用的超级天真的启发式方法如下:
我所追求的是确认我正在做的事情是足够的(再次,它在IE7和FF3中工作)或更好的解决方案,无论出于何种原因,我完全忘记了; 也许我应该检查其他属性等.
编辑:我想要一个与浏览器无关的方法,不幸的是,我并不住在一个浏览器的世界里; 也就是说,浏览器特定的信息是值得赞赏的,但是请注意哪个浏览器知道它确实有效.谢谢!
我尝试过这样的事情:
var Height = $(this).naturalHeight;
但它不起作用.有没有办法做到这一点
greez
我的webapp中有一个img标记,它使用onload处理程序来调整图像大小:
<img onLoad="SizeImage(this);" src="foo" >
这在Firefox 3中工作正常,但在IE7中失败,因为传递给SizeImage()函数的图像对象由于某种原因的宽度和高度为0 - 也许IE在完成加载之前调用该函数？在研究这个问题时,我发现其他人对IE也存在同样的问题.我还发现这不是有效的HTML 4.这是我们的doctype,所以我不知道它是否有效:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在加载图像时是否有合理的解决方案来调整图像大小,最好是符合标准的图像？该图像用于用户上传自己的照片,几乎可以是任何尺寸,我们希望以最大150x150的速度显示它.如果您的解决方案是在上传时调整图像服务器端的大小,我知道这是正确的解决方案,但我禁止实现它:(必须在客户端完成,并且必须在显示时完成.
谢谢.
编辑:由于我们的应用程序的结构,在文档的onload中运行此脚本是不切实际的(接近不可能).我只能合理地编辑图像标签及其附近的代码(例如我可以<script>在它下方添加一个右侧).此外,我们已经拥有Prototype和EXT JS库......管理层更愿意不必添加另一个(一些答案提示jQuery).如果可以使用这些框架解决这个问题,那就太棒了.
编辑2:不幸的是,我们必须支持Firefox 3,IE 6和IE 7.我们也希望支持所有基于Webkit的浏览器,但由于我们的网站目前不支持它们,我们可以容忍只能在大3.
<img src="http://site.com/image.png" />
我在.click事件上更改了此图像的src .
更改后可以加载20多个不同的图像src.
1)我怎么知道,图像是否已经加载(应该被缓存)还是必须加载？
2)如何运行两个不同的功能,对于加载而不是？
谢谢.
当使用Javascript API(plotly.js,而不是plotly-nodejs)使用任何排序的图形图时,如何在图表加载后运行一些javascript？我正在寻找图形化javascript API中的机制,例如,在使用Google Maps API时,"addListenerOnce"与"tilesloaded"或"ready"一起执行相同的操作.
例如,假设我想在呈现https://plot.ly/~PlotBot/685所示的示例后立即显示警报,可以在https://plot.ly上看到html和js代码./ ~PlotBot/685.js.
有很多理由这样做,但我现在面对的是使用wkhtml2pdf,它必须等待页面在显示之前呈现(参见wkhtmltopdf javascript延迟)(是的,我知道我可以使用--javascript-delay与wkhtml2pdf,但硬编码固定的时间,并希望你的程序等待足够长的时间,以便其下一步成功不是我正在寻找的解决方案 - 此外,这种方法是特定于wkhtml2pdf,并没有回答一般题).
喜欢独立于浏览器的解决方案,但至少需要一个适用于Chrome的解决方案
我正在通过无限滚动(通过AJAX实现)将由图片或视频组成的帖子加载到我网站的主要div中.该系统与任何流行的meme网站非常相似.
问题:每个帖子左侧都有一个主体部分,右侧有一个社交按钮容器.我希望社交按钮容器在用户滚动时沿着帖子的主体移动,并停在父div的底部,以便当它们到达帖子的底部时它们可以喜欢它.问题是通过我的AJAX滚动函数加载的一些帖子似乎没有正确计算父项高度,当浏览器窗口的顶部到达时,它们或者从不移动或直接跳到父div的底部.以下是所需行为的直观说明.
实现:我无法编译一个工作的jsFiddle,它可以模拟加载图像和视频的AJAX请求的行为以及on"scroll"调用.这是我的实现和调试尝试:
每篇文章都有以下结构:
<div class="article-container">
<div class="article-body-left"><img src="..."></div>
<div class="social-buttons-right">
<div class="facebook-button">...</div>
</div>
</div>
在每个AJAX请求完成后,我尝试使用'scroll'来确定每个社交按钮容器位置,并在用户使用ajaxComplete()滚动时修改它们:
$(document).ajaxComplete(function() {
bind_sticky_boxes();
});
function bind_sticky_boxes() {
$(window).on('scroll', function() {
$('.social-buttons-right').not('.following').each( function() {
var element = $(this).addClass('following'),
originalY = element.offset().top,
parent_offset = element.parent().offset().top,
parent_height = element.parent().height(),
element_height = element.height(),
destination = originalY+parent_height-element.height() -10;
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
if (scrollTop > originalY - 10){
element.css('position','absolute');
element.css('top',(scrollTop - parent_offset + 10) + 'px'); …我确定这是一个简单的东西,我忽略了,但我似乎无法让我的画布显示存储在服务器上的jpg.
<img id="test_img" alt="test" src="/media/tmp/a4c1117e-c310-4b39-98cc-43e1feb64216.jpg"/>
<canvas id="user_photo" style="position:relative;"></canvas>
<script type="text/javascript">
var image = new Image();
image.src = "/media/tmp/a4c1117e-c310-4b39-98cc-43e1feb64216.jpg";
var pic = document.getElementById("user_photo");
pic.getContext('2d').drawImage(image, 0, 0);
</script>
在<img>如预期显示,但是在画布上是空白的,但它似乎有正确的尺寸.谁知道我做错了什么？
我疲惫的双眼会感激任何帮助.
谢谢
我想为QWebEngineView带有大图像的页面截取屏幕截图。当在红色背景下运行代码时正确呈现但图像不是。
在截取屏幕截图之前，如何确保页面已完全呈现？
from PySide2 import QtCore, QtWidgets, QtWebEngineWidgets
html = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img { max-width:100%; max-height:100%; }
div { height: 270px; width: 540px; }
body { margin: 0; background-color: red; }
</style>
</head>
<body>
<div>
<img src="https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73751/world.topo.bathy.200407.3x5400x2700.png">
</div>
</body>
</html>
"""
class Capture(QtWebEngineWidgets.QWebEngineView):
def __init__(self, parent=None):
super(Capture, self).__init__(parent)
self.loadFinished.connect(self.save)
self.show()
self.resize(540, 270+5)
@QtCore.Slot(bool)
def save(self, isOk):
if not isOk:
print('Error')
return
self.grab().save('page.png', b'PNG')
if __name__ == '__main__':
app = QtWidgets.QApplication()
capture …有人知道一种方式,我怎么能知道加载的图像是不是图像,因为例如返回了404错误？
如果出现错误,我想将我的图片网址设置为例如白色图片.
我不能使用像404错误处理或servlet这样的服务器端技术,因为我想用Amazon S3提供我的图像,它没有错误处理或重定向到"默认文件",以防请求的图像不是找到.