Question

IE8显示图像，Chrome / Firefox不显示带有BlockUI的图像

我的代码是：

<link href="css/jquery-ui.css" rel="stylesheet" />
<script src="js/jquery-1.8.0.js"></script>
<script src="js/jquery.blockUI.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#btnSubmit').click(function () {
            $.blockUI({ 
                theme: true,
                title: '<img src="images/titulo.png" />',
                message: '<center><p><img src="images/spinner.gif" /></p><p><img src="images/mensagem.png" /></p></center>'
            });
        });
    });
</script>

有人能帮助我吗？提前谢谢。

Answer 1

我今天正在处理同样的问题，最后找到了解决方案。当动作激活加载另一个页面时，BlockUI似乎无法加载图像。但是，如果您在点击事件之前在JS中预加载图像，则可以正常工作。

$(document).ready(function () {

  //preload your images here
  img1 = new Image();
  img1.src = "images/titulo.png";
  img2 = new Image();
  img2.src = "images/spinner.gif";

  $('#btnSubmit').click(function () {
    $.blockUI({
      theme: true,
      title: '<img src="images/titulo.png" />',
      message: '<center><p><img src="images/spinner.gif" /></p><p><img src="images/mensagem.png" /></p></center>'
    });
  });

});

Answer 2

thanks is work fine
<script type="text/javascript">
    $(document).ready(function (){        
        var url='<?= base_url(); ?>'; 
        img2 = new Image();
        img2.src = "<?=$this->config->item('base_url')?>images/6.gif";


             jQuery.blockUI({ message: '<h3 style="height:80px;background:#212121;font-weight:bold;color:#fff;padding:0px; margin:0px;  border: none;" ><br/>Please Wait While Loading... <img src="<?=$this->config->item('base_url')?>images/6.gif" title="Loading..." alt=""  style="padding:0px; margin:0px;" /><br/></h3>'});
        }); 

    });
</script>

Answer 3

对我来说，最好的解决方案是在JSP中预加载图像，以便在JS文件中调用时可以正确显示：

     <div style="display: none;"> 
        <img src="images/loading.gif" alt="" /> 
     </div>

IE8显示图像，Chrome / Firefox不显示带有BlockUI的图像

3 个答案: