Question

我正在使用jQuery来替换页面上的iframe类型的环境，方法是将页面内容加载到div中而不是将网址加载到iframe中...我没有任何反对iframe或任何东西的东西，但它似乎只是更清洁，更通用（返回HTML等片段）而不是整页...

无论如何，使用一个简单的例子，这会加载图像两次吗？或者在浏览器尝试打开图像之前修改src属性？它需要完成的原因是它允许正在加载的片段使图像相对于它工作，但显然一旦包含在页面中（在不同的目录中），相对路径就会被破坏......但是这只是我猜的一个例子......

$(document).ready(function() {

    $("#a_get").click(function() {

        $("#content").load("test/page.html"
                          ,""
                          ,function() {
                              $("#content img").each(function(intIndex) {
                                  var src = $(this).attr("src");
                                  var srcArray = src.split("/");
                                  // change the src attribute
                                  $(this).attr("src","test/" + srcArray[srcArray.length-1]);
                          });
        });

     });

});

为了举例，test / page.html可能只是

<p>Picture of a House</p>
<img src="house.jpg" alt="Particular house" width="640" height="480" />

我还应该问一下是否有更好的方法来实现这个目标（可能！）？

编辑：

使用@ redsquare的方法，我认为最初解决问题（页面没有损坏的图像，“闪烁”，然后出现正确的图像），就像我的原始代码一样，但是，检查Web服务器记录破损图像的请求仍在进行中...我已将其缩小到这个：

$.get("test/page.html" ,"" ,function(data) {
      var x = $(data);
      alert("pausing...check logs");
});

如果我在警报框可见时检查日志，则已经对图像发出请求...这是否意味着只要$（数据）被使用，html就会以某种形式出现“添加到页面......？理想情况下，我希望能够在不加任何加载的情况下操纵数据中的所有元素，然后将其添加到页面中......

Answer 1

不要使用.load将内容附加到div中。使用.get，修改响应然后附加到dom。

$.get("test/page.html" ,"" ,function(data) {
      $(data).find('img').each(function(intIndex) {
          var src = $(this).attr("src");
          var srcArray = src.split("/");
          // change the src attribute
          $(this).attr("src","test/" + srcArray[srcArray.length-1]);
      }).appendTo('#content');
});

Answer 2

你可以试试以下......我得到了正则表达式的一些帮助，因为它真的不是我的技能..！

$.get("test/page.html" ,"" ,function(data) {
       data.replace(/src='(?:[^'\/]*\/)*([^']+)'/g, "src='test/$1'")
       $('#content').append( data );
});

Answer 3

只要您创建<img>代码，浏览器就会尝试加载它们。通过.load()或$(data)，浏览器正在创建IMG标记并设置src - 有效地预加载它们。我能看到解决这个问题的唯一方法是使用像redsquare建议的正则表达式。我看到可以在RE中做出一些改进。

这是一个允许在src中使用单引号和双引号的示例 - 我还将其范围限定为仅在img标记中搜索，并且不区分大小写。只是为了显示一个稍微不同的方法 - 使用$ .ajax而不是get / load

$.ajax({
  url: 'test/page.html',
  dataType: 'text',
  success: function(data) {
    $('#content').append(
     data.replace(/<img([^>]*)\ssrc=['"](?:[^'"\/]*\/)*([^'"]+)['"]/gi, "<img$1 src='test/$2'")
    );
  }
});

加载后jQuery图像src发生变化

3 个答案: