Накладные панели на стороне клиента вызывают 404 запроса

Question

Я хочу использовать рули на стороне клиента. В моем html-коде я звоню как:

<img src="data/cloud/products/{{key}}/{{images.product.frontal.trans_bg_img}}" alt=""> 

непосредственно в моем index.html.

В JavaScript я сделать что-то вроде этого:

this.emptyPageSource = $("#productdetail").html(); 
this.productTemplate = Handlebars.compile(this.emptyPageSource); 
var html = this.productTemplate(product); 
$("#productdetail").html(html); 

, который работает отлично. Я беру существующий фрагмент html из dom как шаблон один раз, затем применяю шаблон с рулями и перезаписываю старую запись dom.

Когда я загружаю страницу, я получаю много 404 запросов, потому что браузер уже пытается загрузить ресурсы изображения, даже если шаблон не был вызван, из-за части JS.

Есть ли способ избежать запросов 404? (Я не использую угловые или что-то, так - просто Js + JQuery)

Спасибо заранее Крис

Answer 1

Я конвертируйте #productdetail элемент <script type='text/template' id='productdetail'>. Как и в: JSBin

<h1>A Cat</h1> 
<script type="text/template" id="productdetail"> 
<img src="{{image}}" alt=""> 
</script> 
Rest of it 

<script> 
    var product = { 
    key: '1', 
    image: 'https://media.giphy.com/media/freTElrZl4zaU/giphy.gif' 
    } 
    var emptyPageSource = $("#productdetail").html(); 
    var productTemplate = Handlebars.compile(emptyPageSource); 
    var html = productTemplate(product); 
    $("#productdetail").replaceWith(html); 
</script> 

браузер не понимает text/template скриптов и просто игнорирует. Но мы можем прочитать содержимое внутри нашего скриптового тега, используя его как шаблон.