jQuery image src change after load

Question

Я использую 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]); 
          }); 
     }); 

    }); 

}); 

ради примера, тест/page.html может быть просто

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

я должен также спросить, есть ли лучший способ добиться этого (вероятно!)?

EDIT:

Использование @ метода RedSquare, который я думал вначале решить эту проблему (страница не было разбитое изображение, «мигать», а затем появится правильное изображение), как это было с моим оригинальным кодом однако, проверка веб-сервер регистрирует запрос на сломанные изображения все еще делается ... я сузил к этому:

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

, если я должен был проверить журналы в то время как окно предупреждения видно , запрос на изображения уже сделан ... означает ли это, что, как только $ (data) был использован, html получает «в какой-то форме», добавленный на страницу ...? Я в идеале хочу иметь возможность манипулировать всеми элементами данных без какой-либо загрузки, а затем добавлять их на страницу ...

Answer 1

Как только вы создаете <img> тегов - браузер будет пытаться загрузить их. Либо через .load(), либо $(data) браузер создает тег IMG и устанавливает src - эффективно их предварительно загружает. Единственный способ, которым я мог видеть обойти это, - использовать регулярное выражение, подобное тому, которое предлагает один красноватый знак. Я видел несколько улучшений, которые можно было бы сделать в 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'") 
    ); 
    } 
}); 

Answer 2

Не используйте .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 3

Можете ли вы попробовать следующее ... Я получил некоторую помощь с регулярным выражением, поскольку это действительно не мое умение ..!

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