如何在 JavaScript 跨域请求中避免加载图片

日常开发过程，我们经常要进行跨域请求来获取HTML内容，然后对其进行处理并展示在页面上。当我们使用jQuery封装获取到的HTML内容时，会触发其中的图片加载，造成不必要的HTTP请求。不仅浪费资源，还可能影响页面加载速度，如何在跨域请求中避免图片加载呢？

假设我们有一个跨域请求，通过以下代码获取HTML内容并缓存：

getPage: (baseUrl) -> 
  console.log("beg scraping") 
  $.ajax 
    url: baseUrl, 
    type: "get", 
    dataType: "", 
    success: (data) => 
      frag = data.responseText 
      @page = $(frag) # 缓存在对象中，但会发出额外的40个请求 
      console.log "Scraping done" 
    error: (status) -> 
      #window.pushError("getPage error: #{status}")

当我们使用$(frag)包装HTML内容时，jQuery会自动加载其中的图片，导致额外的HTTP请求。为了避免这些不必要的请求，我们需要一种方法来剔除HTML中的图片标签。

解决方案

方法一：删除图片标签

可以通过正则表达式在将HTML内容转换为jQuery对象之前，删除所有的<img>标签：

var no_images = $(data.responseText.replace(/<img[^>]*>/g, ''));

使用正则表达式匹配并删除所有的<img>标签，然后再将处理后的HTML内容转换为jQuery对象。

方法二：使用XML文档进行搜索

另一种方法是将HTML内容作为XML文档进行解析和搜索。

function searchXml(xmlStr, selector) {
    var parser, xmlDoc;
    if (window.DOMParser) {
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(xmlStr, "text/xml");
    } else {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.loadXML(xmlStr);
    }
    return $(xmlDoc).find(selector);
}

console.log(searchXml('<p><img src="http://image.url/file.jpg" /></p>', 'img').attr('src'));