当前位置：文江博客话题详情

在 IE8 中，在页面上进行任何翻转操作后，图像会跳转到正确的位置...在任何元素上

发布于 2024-10-06 05:48:09 字数 773 浏览 1 评论 0原文

我必须快速拼凑出一个页面并使用 Photoshop 来分割图像。然后，Photoshop 使用复杂的表格结构和间隔 gif 将其导出为 HTML 来创建页面。

我需要在某些表格单元格中填写一些自定义内容。在表格的一部分中，我使用 flickrbadge (http://www.flickrbadge.com/) 用一些 flickr 缩略图填充单元格。我无法控制加载何时发生。

在另一个单元格中，我有一个大标题图形（），在它下面的单元格中，我有 HTML 文本。

该页面在 PC 上的 IE8 中无法运行。（没有用IE7测试）发生的情况是，当页面加载时，标题图形和下面的 HTML 文本会出现在彼此的顶部。然而，当我翻转其中一个图像后，标题图形会捕捉到正确的位置！

我怀疑加载 flickr 缩略图是罪魁祸首，所以我注释掉了脚本，标题图形出现在它应该出现的地方。

我可以在 CSS 中做些什么来帮助解决此问题，例如将标题图形向上推，或使用占位符图像填充 flickr 单元格？

更新

我可以延迟执行 flickr 脚本吗...这是表格单元格中的内容。

<script type="text/javascript" src="http://www.flickr.com/badge_code.gne?count=16&display=latest&size=square&nsid=12345678@N02&raw=1"></script>

原文

I had to hack together a page quickly and used Photoshop to slice up images.
Photoshop then exported this as an HTML using complicated table structure and spacer gif's to create the page.

There's some custom content that I need to fill out in some of the table cells.
In one part of the table I'm using a flickrbadge (http://www.flickrbadge.com/) to populate the cell with some flickr thumbnails. I don't have control over when this loading happens.

In another cell I have a big Title graphic(<td colspan="4" rowspan="2"> ) and in a cell below it I have HTML text.

The page works doesn't work in IE8 on PC. (Didn't test it with IE7)
What is happening is that when the page loads, the Title graphic and the HTML text undereathe appear on top of each other. However, after I rollover one of my image rollovers, the Title graphic snaps into the correct position!

I suspected that loading of the flickr thumbnails is the culprit, so I commented out the script and the Title graphic appears where it should.

Is there anything I can do in the CSS to help with this such as push the Title graphic up, or populate the flickr cell with a placeholder image?

Update

Can I delay the execution of the flickr script...this is what is in the table cell.

<script type="text/javascript" src="http://www.flickr.com/badge_code.gne?count=16&display=latest&size=square&nsid=12345678@N02&raw=1"></script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柠檬 2024-10-13 05:48:09

您可以尝试使用以下方法延迟它：

function initFlickr() {

  setTimeout(function() {

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://www.flickr.com/badge_code.gne?count=16&display=latest&size=square&nsid=12345678@N02&raw=1';

    // set an id on the table cell so you can get hold of it here.
    var el = document.getElementById('id-of-that-table-cell');
    el.appendChild(script);

  }, 100); // 100 milliseconds.

}

然后可能想从加载中触发它。

<body onload="initFlickr()">

不确定这是否有效，但它应该在第一次成功抽奖之后插入脚本。

You could try delaying it with:

function initFlickr() {

  setTimeout(function() {

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://www.flickr.com/badge_code.gne?count=16&display=latest&size=square&nsid=12345678@N02&raw=1';

    // set an id on the table cell so you can get hold of it here.
    var el = document.getElementById('id-of-that-table-cell');
    el.appendChild(script);

  }, 100); // 100 milliseconds.

}

And then probably want to trigger it from onload.

<body onload="initFlickr()">

Not sure this will work, but it should insert the script after the first successful draw.

回复收藏 0 原文

凡间太子 2024-10-13 05:48:09

是的，这就是 IE 的时髦之处。您可以连接到图像的 onload 事件并从那里更改容器的大小。

回复收藏 0 原文

倚栏听风 2024-10-13 05:48:09

是的，看起来 flickr 读取了元素的当前位置
您可以通过这种方式延迟加载此脚本：

   <script>
     function loadFlickr(){
       var headelement = document.getElementsByTagName('head')[0];
       var scriptvar = document.createElement('script');
       scriptvar.type = 'text/javascript';
       scriptvar.src= 'http://www.flickr.com/badge_code.gne?count=16&display=latest&size=square&nsid=12345678@N02&raw=1';
       headelement.appendChild(scriptvar);
    }
    window.onload = loadFlickr;
  </script>

但是，正如另一位海报提到的，您可能希望将其填充到特定的单元格中。这实际上不可能延迟，因为 flickr 使用的是 document.write - document.write 仅在加载之前、构建填充 HTML 之前起作用。（更新：您实际上可以在 flickr 加载之前重写 document.write 方法本身，并更改 document.write 仅适用于 flickr 的工作方式 - 我认为这是丑陋的黑客，因为它依赖于知道 flickr 将输出什么样的内容，请参阅文章底部这里 http://www.tutkiun.com/2010/07/ load-javascript-after-pageload.html ）

最简单的解决方案是为 flickr 徽章创建全新页面，并使用 iframe 将其嵌入到表格单元格中

yes, it looks like flickr reads current position of the element
you can delay loading of this script this way:

   <script>
     function loadFlickr(){
       var headelement = document.getElementsByTagName('head')[0];
       var scriptvar = document.createElement('script');
       scriptvar.type = 'text/javascript';
       scriptvar.src= 'http://www.flickr.com/badge_code.gne?count=16&display=latest&size=square&nsid=12345678@N02&raw=1';
       headelement.appendChild(scriptvar);
    }
    window.onload = loadFlickr;
  </script>

however, as another poster mentioned you probably want to populate this into particular cell. that's not really possible to delay since flickr is using document.write - the document.write only works before load, before fill HTML is constructed. (Update: you can actually override document.write method itself before flickr loads and change how document.write works just for flickr - i think it's ugly hack, since it relies on knowing what kind of content flickr will output, see bottom of the article here http://www.tutkiun.com/2010/07/load-javascript-after-pageload.html )

The easiest solution for you would be to create entirely new page for just flickr badge and embed it into your table cell using iframe

回复收藏 0 原文

痴情 2024-10-13 05:48:09

我实际上使用了这个技巧：

就在结束正文标记之前...

<script type="text/javascript">
/* 
* A hack to reload the title graphic so that it will position itself correctly...
*/
document.images["title_graphic"].src = "images/content_title.jpg";
</script>

这似乎可以解决问题...

我想我应该对页面进行手动编码，以便我可以控制。我认为部分原因是桌子也很古怪。

I actually used this hack:

Right before the closing body tag...

<script type="text/javascript">
/* 
* A hack to reload the title graphic so that it will position itself correctly...
*/
document.images["title_graphic"].src = "images/content_title.jpg";
</script>

This seems to do the trick...

I think I should have just hand coded the page so that I had control. I think part of it was the tables being all wacky too.

回复收藏 0 原文