Eu sou relativamente novo no jQuery e perdoo se esta questão é muito simples, mas eu tenho procurado inúmeros tópicos por horas e não consigo encontrar uma solução definitiva.

Eu tenho a seguinte estrutura de pastas:

/index.html

/html/pages/page1.html
/html/pages/images/
/html/pages/css/
/html/pages/js/
/html/pages/includes/

Estou tentando carregarpage1.html em um DIV emindex.html da seguinte forma básica:

$('#content').load('html/pages/page1.html', function () {
   console.log('loaded');
});

page1.html carrega bem, no entanto, consiste em várias inclusões e todo o conteúdo (imagens, CSS, JS, etc.) é relativo aoPáginas pasta (por exemplo: ../images/header.jpg), por isso não aparece quando carregadoindex.html desde então tudo se torna relativo a/ ouindex.html.

Eu li em algum lugar que fazer todos os caminhos absolutos ou raiz relativa empage1.html vai funcionar, também adicionando uma espécie de variável de caminho global, no entanto, o problema é que há muito conteúdo legado e mudar tudo isso não é uma opção.

Existe uma maneira de fazer cargapage1.html como descrito acima, sem modificar nenhum dos caminhos, apesar de serem relativos? Ou alguém pode recomendar uma maneira eficiente (outros plugins, técnicas) de carregar conteúdo externo dessa maneira?

Obrigado!