javascript - jQuery .load 导入特殊字符

Question

我目前有一个令人难以置信的错误。我正在使用 jQuery 中的 .load 函数加载幻灯片的图像，并在我将 url 导入到的 img 标签下面得到一堆错误。我已尽力在下面演示我的功能和标记。我在任何现代浏览器中都没有收到错误，但 IE 给我错误

     $('a').click(function(e){
    $(trainFull).fadeOut(400, function(){
         jQuery(trainFull[0]).load('http://img.jpg", function(){
          jQuery(this).hide().attr('src', 'http://img.jpg").fadeIn(400);
   });



<img alt="Train Full" src="http://img.jpg" ">
<img xmlns="http://www.w3.org/1999/xhtml">�����JFIF���d�d�����Ducky�����(�����Adobe�d���������--etc, etc, etc/>

Answer 1

如果我没理解错的话，您是在尝试使用 jQuery 的 XMLHttpRequest 包装器 ( load() ) 预加载图像。这是... unlikely to work well .

您看到的是 IE 试图将二进制图像数据解释为文本(结果可能很差)，jQuery 试图将它们填充到您的 <img> 中。元素，IE 试图显示它们。虽然这可能确实能够预缓存图像，但它是错误的工具...而且正如您所展示的，该工具可能严重失败。

幸运的是，有更简单的方法。大多数浏览器都提供对加载图像的内置支持，并在加载图像时通知脚本。例如:

$('<img />') // detached image, used to pre-load
    .attr('src', 'http://img.jpg') // tell it which image to load
    .load(function() // attach a callback to inform us when it's loaded
    {
      // within the callback, "this" refers to the temporary image element
      // that has just finished loading its source

      // now that the image is in the cache,
      $(trainFull[0])
        .attr('src', this.src) // let our on-page image display it
        .fadeIn(400); // and show that
    });

如果您想了解更多相关信息，我建议您从:jQuery ajax images preload 开始.