Использование ленивой загрузки внутри popover

Question

Я попытался реализовать Lazy Load внутри popover. Для LazyLoad, я использую Echo.js (http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/)

В таблице, у меня есть клетки, как это:

<td> 
    <a id='pop-ID' class='pop'> 
    <img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'> 
    </a> 
</td> 

Как вы можете видеть, в моей камере, я могу увидеть загрузки GIF , и в соответствии с положением большой палец загружен. работает довольно хорошо

Теперь я хочу, чтобы загрузить в пирог полный размер Я хочу использовать довольно ту же технику, чтобы избежать загрузки всех изображений полноразмерных моей страницы

Я держу то же самое стол/клетка вещь, и добавить в моей странице в скрытый DIV включая

<td> 
    <a id='pop-ID' class='pop'> 
    <img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'> 
    </a> 
</td> 

<div style='display: none;' id='pop-ID_content' class='popSourceBlock'> 
    <div class='popTitle'>PopOver Title</div> 
    <div class='popContent'> 
    <img src='loader.gif' data-echo='image.jpg' class='img-rounded'> 
    </div> 
</div> 

и я застрял здесь, я вижу только загрузки GIF внутри пирога, не image.jpg я должен быть в состоянии видеть

Вот это JS я использую для пирог

$(".pop").each(function() { 
    var $pElem= $(this); 
    $pElem.popover(
    { 
     placement: 'left', 
     trigger: 'hover', 
     html : true, 
     title: getPopTitle($pElem.attr("id")), 
     content: getPopContent($pElem.attr("id")) 
    } 
); 
}); 

function getPopTitle(target) { 
    return $("#" + target + "_content > div.popTitle").html(); 
}; 

function getPopContent(target) { 
    return $("#" + target + "_content > div.popContent").html(); 
}; 

Вы видите, что это неправильно или что я пропустил?

Это довольно моя первая попытка на эту тему, поэтому я читал другие темы про, но я не мог найти способ, чтобы воспроизвести результаты в моей конфигурации

Answer 1

Используя комментарий выше, я только немного изменил линию, связанную с изображением.jpg

<td> 
    <a id='pop-ID' class='pop'> 
    <img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'> 
    </a> 
</td> 

<div style='display: none;' id='pop-ID_content' class='popSourceBlock'> 
    <div class='popTitle'>PopOver Title</div> 
    <div class='popContent'> 
    <img data-src='image.jpg' class='lazyload img-rounded'> 
    </div> 
</div> 

Теперь это работает, спасибо!

Попробую теперь использовать lazysizes более широко, чтобы решить мои проблемы