zoukankan      html  css  js  c++  java
  • IE6下jquery js将图片写入html图片不显示的问题

    今天突然发现ie6浏览器动态写入图片时,图片路径是正确的,但就是不显示图片.

    图片html已经插入到页面中,但是图片没有显示,IE7,火狐等浏览器都正常,要右键-“显示图片”,图片才显示,很奇怪的。

    code如下:

     function insertImg(o,id){
        var imageUrl= PIC_PATH;  //图片前缀

      if (id < 0) {
              return false;
          }
          $("#banks").css('display','none');
          $("#imgBox").html('<img src="'+imageUrl+'/images/pic/'+id+'.gif" alt="'+o.title+'" />');

    }

    htm如下:

    ul  id="imgLIst" class="img-list clear">
      <li><a href="javascript:;" onclick="insertImg(this, 1);" title="第一张图"><img src="http://www.xxxx.com/images/pic/1.gif" alt="第一张图"></a></li>
      <li><a href="javascript:;" onclick="insertImg(this, 2);" title="第二张图"><img src="http://www.xxxx.com/images/banks/2.gif" alt="第二张图"></a></li>

    </ul>

    百度了下发现

    这是IE6 一个底层机制的bug,是<a href="javascript:void(0)">或者<a href=#">这样使用a标签的话并不能阻止a标签最后触发一个什么行为,导致ie6会错误的认为页面刷新或者重定向了,并且中断了当前所有连 接,这样新图片的加载就被阻止了。

    一看自己的,确实使用a标签触发事件的:<a href="javascript:void(null);" class="btn" id="insert_pic">插入图片</a>

    将a标签改为其他标签,我就改成了属性相近的span标签,结果就ok了。

    <span id="append_finish" class="append_finish">图片插入完毕!</span>

    或者

    <a onclick="javascript:fun();return false;">加return false</a>

    修正后的htm如下:

    ul  id="imgLIst" class="img-list clear">
      <li><a href="javascript:;" onclick="insertImg(this, 1);return false;" title="第一张图"><img src="http://www.xxxx.com/images/pic/1.gif" alt="第一张图"></a></li>
      <li><a href="javascript:;" onclick="insertImg(this, 2);return false;" title="第二张图"><img src="http://www.xxxx.com/images/banks/2.gif" alt="第二张图"></a></li>

    </ul>

    图片能正常显示了 : )

  • 相关阅读:
    标签的讲解
    属性分类
    LeetCode 003. 无重复字符的最长子串 双指针
    Leetcode 136. 只出现一次的数字 异或性质
    Leetcode 231. 2的幂 数学
    LeetCode 21. 合并两个有序链表
    象棋博弈资源
    acwing 343. 排序 topsort floyd 传播闭包
    Leetcode 945 使数组唯一的最小增量 贪心
    Leetcode 785 判断二分图 BFS 二分染色
  • 原文地址:https://www.cnblogs.com/xiaohong/p/2918288.html
Copyright © 2011-2022 走看看