Question

我有一些奇怪和间歇性的错误，我认为这些错误与我的jQuery有关。我制作了一个简单的内容预加载器，它为应用程序呈现所有图像，然后在完成后显示内容。以下是剧本：

<?php

$i=0;

$handle=opendir('images');

while(false!==($file=readdir($handle)))
{
  if($file!="." && $file!=".." && $file!=basename(__FILE__))
  { ?>
    <img class="image_preload hidden" src="<?php echo $app_info['image_url'].$file; ?>"></img> <?php 

    $i++;
  }
} ?>

<script>
  max_loaded=<?php echo $i; ?>;
  $('.image_preload').bind({'load':function(){preloadCounter();},'error':function(){preloadCounter();}});
</script>


  function preloadCounter()
  {
    total_loaded++;

    $('#loading_percentage').text(Math.floor((total_loaded/max_loaded)*100));
    $('#loading_bar').css('width',Math.floor((total_loaded/max_loaded)*100)+'%');

    if(total_loaded==max_loaded && max_loaded>0)
    {
      $('#load_display').hide();
      $('#app_display').show();

      setCanvasSize();
      runOnStart();
    }
  }

当然，PHP代码首先运行。该脚本搜索images目录并呈现所有图像并隐藏它们。当图像放入页面时，$i会递增。

完成此操作后，应该在页面底部设置事件监听器（与“加载”和“错误”相关联）。它首先将max_loaded var设置为放入页面的图像数量，然后监听器应该触发。

然后jQuery根据JS var增加的距离修改加载栏。当页面加载完成或错误时，它应该显示我的应用程序的内容。

这种情况很有效，大多数错误来自IE。我有几个用户的报告说它在所有最新的浏览器中都失败了。奇怪的是，它适用于最新浏览器中的其他人。

这里有什么我想念的吗？我确实在IE中得到了错误，但在开发模式下从未显示任何错误。我很茫然。

问题是它会加载一些内容，但不是全部。装载杆最终以任何百分比停止。有时它会经历，有时它不会。

Answer 1

来自the jQuery load event documentation （强调我的）：

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，则无法在WebKit中正确触发

它没有正确地冒泡DOM树

可以停止为已存在于浏览器缓存中的图片触发

为什么不让浏览器本身报告页面加载状态？他们现在已经可靠地做了二十年了。

Answer 2

问题在于浏览器缓存。使用名为ImageMonitor的jQuery插件修复了问题。

间歇性的jQuery错误

2 个答案: