相关疑难解决方法(0)

我想要做:

$("img").bind('load', function() {
  // do stuff
});

但是从缓存加载图像时不会触发加载事件.jQuery文档提出了一个修复此问题的插件,但它不起作用

如何检查我的服务器上的文件是否存在于jQuery或纯JavaScript中？

如何从服务器或浏览器缓存中检测图像何时完成加载？我想在同一个<img/>标签中加载各种图像,并检测新图像的加载何时完成.

谢谢.

在同构呈现的页面图像可以在主script.js文件之前下载.因此,可以在react注册onLoad事件之前加载图像- 从不触发此事件.

script.js

constructor(props) {
    super(props);
    this.handleImageLoaded = this.handleImageLoaded.bind(this);
}

handleImageLoaded() {
    console.log('image loaded');
} 

render() {
    return (
        <img src='image.jpg' onLoad={this.handleImageLoaded} />
    );
}

场景1 - image.jpg大于script.js

在这种情况下一切正常.在最终加载图像之前注册事件,因此在控制台中是image loaded消息.

场景2 - image.jpg小于script.js

在这种情况下,您可以看到帖子开头描述的问题.onLoad事件未触发.

题

为了onLoad在方案2中触发事件,我该怎么办？

编辑:Soviut答案实施

要检测渲染时图像是否准备好,您应该检查complete纯javascript img对象上的属性:

constructor(props) {
    super(props);
    this.state = { loaded: false };
    this.handleImageLoaded = this.handleImageLoaded.bind(this);
    this.image = React.createRef();
}

componentDidMount() {
    const img …

我正在尝试显示ghost元素而不是拖放的默认浏览器预览.问题是在拖动时不显示ghost元素内的ghost元素.但是,如果我放下它,再次拖动图像就会显示出来.

所以我认为这可能是某种与缓存相关的问题.但在这种情况下,我无法看到如何预先缓存图像.

这是代码:

// HTML:

<div class="parent container">
<img class="element" src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg" draggable="true" />
</div>

// JS:

document.querySelector(".element").addEventListener("dragstart", function(e) {
    var img = document.createElement("img");
    var div = document.createElement('div');
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.position = 'fixed';
    div.style.top = '-1000000px';
    div.style.left = '-1000000px';
    div.style.border = '2px solid red';

    img.src = "http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg";
    img.style.width = '100px';
    img.style.height = '100px';
    div.appendChild(img);
    document.body.appendChild(div);
    e.dataTransfer.setData('text/plain', 'test');
    e.dataTransfer.setDragImage(div, 0, 0);
}, false);

小提琴:https: //jsfiddle.net/etseq5cg/5/

重现步骤:

1)打开小提琴/运行片段

2)尝试拖动样本图像

实际:你会看到一个带红色边框的空方块

预期:里面有图像的方形.

要再次重现它,您需要强制重新加载页面(ctrl + f5).这就是为什么我认为这是缓存相关的问题.

注意:我知道我应该在dragend处理程序中从DOM中删除ghost元素,但这在这里并不重要. …

我正在使用Google Maps v3 API,我有一个基于ImageMapType类的自定义叠加层.我想在加载叠加的瓷砖时显示某种加载指示,但我看不出有什么方法可以知道它们何时完成.

创建叠加层的代码类似于以下内容:

var myOverlay = new google.maps.ImageMapType({
    getTileUrl: myGetTileUrl,
    tileSize: new google.maps.Size(256, 256),
    isPng: true
});

myMap.overlayMapTypes.push(myOverlay);

以上工作正常,叠加成功加载; 它似乎没有地图发出任何事件来指示ImageMapType覆盖的状态.

我希望地图至少在瓦片完成加载时发出"空闲"事件,但据我所知,它没有.

我怎么知道ImageMapType覆盖完成加载的时间？

编辑

我在jsFiddle上写了一个测试用例:http://jsfiddle.net/6yvcB/ - 观察你的控制台输出中的"闲置"这个词来查看空闲事件何时触发.请注意,单击按钮添加叠加层时,它永远不会触发.

还有,小猫.

I created this component that fades in an image once it is loaded to the client. I would think there is a more Vue-like way to solve this, like using Vue events, but could not find it. What is the Vue way to detect when an image is loaded?

https://codepen.io/kslstn/pen/ooaPGW

Vue.component('imageThatFadesInOnLoad',{

  data: function(){
    return {
      src: 'http://via.placeholder.com/350x150',
      loaded: false,
    }
  },

  mounted: function () {
    var image = new Image()
    var that =  this
    this.loaded = image.addEventListener('load', function(){that.onLoaded()}) // This …

长期以来，我一直将其视为“绝对真理”：

let img = new Image();\nimg.src = \'... some url ...\'\nimg.onload = function() { console.log(\'onload\') }\n

是错误的，因为.onload处理程序可能不会被调用。.addEventListener(\'load\', function() ... )设置后使用附加处理程序也是如此.src：它可能不起作用。（请参阅此示例答案，说明：“...在为 src 属性分配值之前添加事件侦听器...”）

这个问题的背景：我在流行的 p5.js 库中找到了一个.src调用之前设置的示例，特别是在这里。我想解决这个问题并提交 PR。但是，我还想创建一个单元测试，该测试在当前代码（调用之前的设置）中失败，并在我的修复中通过。.addEventListener.src =.addEventListener

(function f() {\n  let i = new Image();\n  i.src = \'//placekitten.com/10/10\';\n  document.querySelector(\'body\').appendChild(i);\n  \n  let out = 0;\n  for(let i = 0; …