【问题标题】:Fancybox2 Base64 image not work in IEFancybox2 Base64 图像在 IE 中不起作用
【发布时间】:2013-05-05 07:56:36
【问题描述】:

我将在 fancybox 中使用 base64 图像。

我的代码是这样的:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js?v=2.1.4"></script>

<a class='fancybox' rel='album' href='data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPb
WLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVr
ApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KT
kpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxM
AF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=' title='Description'"><img src='data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPb
WLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVr
ApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KT
kpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxM
AF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=' style='border:0px;vertical-align:middle;margin-top:4px;margin-right:4px;margin-bottom:4px;margin-left:4px;'> </a>

在所有浏览器(IE、Firefox、Safari、Chrome)下都可以使用,但是如果base64图像较大(data:image/jpg超过60000个字符),则无法在IE中显示。

对于这个案例有什么经验和解决办法吗?

谢谢 长宽

【问题讨论】:

  • Internet Explorer 中的 base64 编码图像存在限制。为什么首先使用base64,而不是真实图像?这些有许多优点。
  • 不是fancybox问题,是IE限制。
  • 感谢 Pekka 和 JFK 的评论。这是因为我将图像作为二进制数据存储在mysql中,每条记录都与自己的图像匹配。
  • 我正在考虑将fancybox的href链接设置为一个php页面,该页面将从数据库中查询指定id并显示图像。这行得通吗?

标签: jquery image internet-explorer fancybox base64


【解决方案1】:

你可以试试这个:给你的图片添加一个ID属性,然后添加这个ID的链接

<a class='fancybox' rel='album' href='#ImgBase64' title='Description'">
<img src='data:image/gif;base64,...' ID='ImgBase64'>
</a>

【讨论】:

    猜你喜欢
    • 2015-12-18
    • 1970-01-01
    • 2011-11-05
    • 2014-08-09
    • 1970-01-01
    • 1970-01-01
    • 2013-03-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多