文件createElement("IMG")与new Image()

  • 时间:
  • 分类: Python

好吧,所以通常我正在使用document.createelement(" img"). 我正在做的是创建各种照片库,我基本上想提供总#图像,行/cols max拇指/完整图像,然后让脚本完成工作. 我选择的解决方案是一次加载图像并更改其大小 /位置 /可见性,以显示"拇指画廊"或"完整图像大小"(并允许分页和所有铃铛和哨声)... 自然,问题与图像的大小有关. 当我第一次加载画廊时,我将所有图像从屏幕上加载,没有指定的高度/宽度...然后,我使用图像的Onload事件来抓住"正确"的高度/宽度.

选择 | 换行 | 行号
  1. function Photo( ... ) {
  2. ...
  3. this.element = document.createElement("IMG");
  4. this.element.onload =  callbackFunc( this, "init" );
  5. ...
  6. }
  7.  
  8. /* callbackFunc is a function I use to let me use "this" inside an event handler
  9. -- similar to prototype's "bindAsEventListener" for those familiar with it */
  10.  
  11. /* _event = Event object;  _this = source element (loaded image) */ 
  12. Photo.prototype.init = function( _event, _this )  {
  13.   this.width=_this.width; 
  14.   this.height=_this.height;
  15. }
  16.  

我注意到我的图像的高度/宽度被填充为0.仅在Internet Explorer中进行间歇性. 我认为这可能与缓存的图像有关……或其他信息. 因此,我在这个愚蠢的小事上闲逛了几个小时...最后,我最终切换到:

选择 | 换行 | 行号
  1. this.element = new Image()

现在,它一直在两个浏览器中工作. 还有其他人注意到这个问题吗? 我在其他一些论坛上看到了有关它的帖子,但没有解决这个问题.

# 回答1

noooooo,即再次使我失败. 因此,当一个人试图在新窗口之间进行DOM操作时,必须在该上下文中创建的任何元素....否则,IE将引发我见过的最晦涩的错误:"不支持此类接口".

选择 | 换行 | 行号
  1. // open up a new window...
  2. var a = window.open("about :blank", "a");
  3.  
  4. // create an element using this document
  5. var test = document.createElement("DIV");
  6. test.appendChild( document.createTextNode("This is a test") );
  7.  
  8. // this works in Firefox; IE returns "no interface supported"
  9. a.document.body.appendChild( test );
  10.  
  11. // the workaround is to change the creation slightly:
  12. var test2 = a.document.createElement("DV");
  13. test2.appendChild( document.createTextNode("test #2") );
  14.  
  15. // this works in both browsers
  16. a.document.body.appendChild( test2 );
  17.  

这很好,写我的代码的方式,我可以轻松地更改我的todom函数,以获取用于创建哪个文档的参数 - 我可以轻松地将其设置为新窗口的文档. 问题?

选择 | 换行 | 行号
  1. this.element = new Image()
  2.  

nuooooooooooooooooooo .....当我将其切换为" CreateElement"时,它不会加载图像,当我将其更改为" new Image()"时,它给了我一个"接口不支持错误" ....... ......是否有一种方法可以在另一个文档的上下文中摇晃"新image()"? 任何人?

# 回答2

噢,地狱! 我知道了! 我正在使用的执行顺序: 1)"加载图库":init表单,加载每个图像 - 导致: 2)"图像预紧力":创建图像元素并设置包括SRC在内的所有属性 - 这也设置了" Onload"功能处理程序,以最终处理高度/宽度,并最终将图像附加到形式 4)图像负载和on Load处理程序火灾,但使用" CreateElement('img')" IE返回0/0的高度/宽度 基本上,我所做的是将"附录"行从预紧代码(在实际加载之前)移至Onload处理程序(完成加载后),这似乎可以解决问题. 我猜想,当您将动态创建的,未加载的图像附加到表单上时,当图像最终确实加载时,在Onload事件处理程序中,目标的高度/宽度将返回0/0 ...在IE中. 即使这是混乱的 我想到了可怕的骇客的一部分,高度/宽度在Outerhtml属性中可见:

选择 | 换行 | 行号
  1. alert( _this.outerHTML )
  2. /* returned
  3. <IMG
  4.   class=Link
  5.   id=Photo0
  6.   style="LEFT: 0px; POSITION: absolute; TOP: 0px" 
  7.   height=720 src="photos/0.jpg" 
  8.   width=960 border=0>
  9. */
  10. alert( _this.width );
  11. // returned 0
  12.  

我之前已经说过了,我会再说一遍:即可以吮吸我的坚果.

# 回答3

啊哈哈哈....我说得太早了. ie显示了图像正常,这是原来的问题...我称之为的第一个" onclick"(单击图像以显示全尺寸)可行,但在此之后提高任何事件处理程序. 即窗口.....没有错误,没有"无限循环取消脚本"提示...什么都没有. 只是[不回应]. 当我弄清楚时,我会发布更多...我的直觉是与重新加载后重新连接事件有关的事情 - 但是奇怪的是,第一个事件加载了.....我' m使用每个callbackfunc. IE内存泄漏问题,有人吗? [编辑]哦,是的...我需要提到Firefox正常工作吗?
# 回答4

可能. 您可以发布一个示例吗? 有趣的问题. 感谢您发布您的"发现" :)

标签: Javascript

添加新评论