代码之家 › 专栏 › 技术社区 › davidsleeps

jquery image src加载后更改

jquery image html

1

davidsleeps · 技术社区 · 17 年前

我正在使用jquery来替换页面上的iframe类型的环境,方法是将页面内容加载到一个div中,而不是将一个url加载到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就会“以某种形式”添加到页面中…?理想情况下,我希望能够在不加载任何类型的情况下操作数据中的所有元素,然后将其添加到页面…

3 回复 | 直到 15 年前

1

0

gnarf 17 年前

一旦你创造了 <img> 标签-浏览器将尝试加载它们。要么通过 .load() 或 $(data) 浏览器正在创建一个img标签,并设置src-有效地预加载它们。我能理解的唯一方法就是使用一个像Redsquare建议的regexp。我看到了一些可以改进的地方。

下面是一个示例,它允许在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'")
    );
  }
});

2

3

redsquare 17 年前

不要使用。加载将内容附加到div.use.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');
});

3

0

redsquare 17 年前

你能试试下面的吗?我得到了一些关于regex的帮助,因为它真的不是我的技能。

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