使用 jQuery .load() 仅接收图像的字节码答案

【问题标题】：Receiving only bytecode of images using jQuery .load()使用 jQuery .load() 仅接收图像的字节码
【发布时间】：2013-11-04 17:37:58
【问题描述】：

我正在使用 jQuery .load() 接收加载图像的字节码。

是吗

因为没有指定 MIMEType？
因为我使用的是没有文件扩展名的图像 url？
因为我必须以某种方式包裹整个东西？

这里是一些示例代码：

HTML

  <div class="slide" data-img-src="http://lorempixel.com/200/100/technics/">
    <div class="slide-content">
      <h1>Heading 1</h1>
      <p>Just some random text for demonstration purposes.</p>
    </div>
  </div>

  <div class="slide" data-img-src="http://lorempixel.com/200/100/nature/">
    <div class="slide-content">
      <h1>Heading 1</h1>
      <p>Just some random text for demonstration purposes.</p>
    </div>
  </div>

Javascript

var ajax_load = "<img src='img/load.gif' alt='loading...' />";

$(".slide").each(function(index, el) {
    var img_src = $(this).attr('data-img-src');

    $(this).prepend(ajax_load);
    $(this).load(img_src, null, function() {
        console.log(img_src + " loaded");
    });
});

还有一个小提琴http://jsfiddle.net/BCLJE/

【问题讨论】：

标签： javascript jquery html ajax dom

【解决方案1】：

您需要确保您尝试检索的数据或 HTML 片段位于同一个域中。由于同源政策

http://en.wikipedia.org/wiki/Same_origin_policy

由于浏览器安全限制，大多数“Ajax”请求都受同源策略的约束；请求无法从不同的域、子域或协议成功检索数据。

在 load() API 速记方法的附加说明下：

http://api.jquery.com/load/

【讨论】：

如果图像和网页不在同一台服务器上，那么由于安全限制，您将无法将数据拉入不同服务器上的不同域..您可以尝试不同的 AJAX方法可能使用 JSONP .. 这是一篇关于使用 JSONP 和 AJAX 进行跨域数据检索的文章 - webdevdoor.com/jquery/cross-domain-browser-json-ajax -

【解决方案2】：

如果您尝试将图像的内容（通过 AJAX 加载，不少于）设置到只接受文本的字段中，这就是我所期望的。如果您想用图像本身替换这些元素的内容，请创建具有正确 src 属性的 <img> 元素：

var $img = $('<img/>', {src: img_src}).load(function(e) {
    // do something when the image has actually loaded?
});
$(this).empty().append($img);

jsFiddle demo

【讨论】：

为什么在变量名前使用美元符号？你能向我解释一下 $('', {src: img_src}) 吗？
@Manticore 变量名开头的美元符号是一种流行的约定，表示该变量引用了一个 jQuery 对象，因此您知道可以在其上调用 jQuery 方法。这绝不是必需的。
$('</img>', {src: img_src}) 部分是（严重）重载的 jQuery 函数的变体，用于创建新的 DOM 元素。在这种情况下，我正在创建一个新的 <img> 元素（由第一个参数表示：'<img/>'），第二个参数是一个具有要为该元素设置的属性的对象（在这种情况下，它只是设置src 属性到 new_src 的值）。