Рабочий пример данных с ленивой загрузкой изображений

Question

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

метод я имел наибольший успех использует jquery.lazyload штепсель:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
    $("img.lazy").lazyload(); 
    }); 
</script> 

Вот как я ссылку на изображение:

<img class="lazy" data-original="https://example.com/image.jpg" width="50" height="50" /> 

Ленивая загрузка работает нормально, если я никогда измените сортировку. Однако, если я решил изменить сортировку таблицы, нажав на один из заголовков столбцов, ленивая загрузка перестает работать, и любые изображения, которые не были загружены в этот момент, остаются пустыми, когда я просматриваю их в представлении.

У меня не было эксперта по javascript или jQuery, поэтому пришлось учиться на примерах здесь, в SO и в других местах. Но эта проблема претит меня. Из моих исследований я вижу много комментариев и фрагментов о том, как это возможно, но фактический рабочий пример, подтверждающий это, не поддерживается.

jquery-lazyload images in jquery-databables

https://datatables.net/forums/discussion/1959/image-thumbs-in-table-column-lazy-loading

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

Answer 1

Используйте параметр drawCallback, чтобы определить функцию, которая будет вызываться каждый раз, когда DataTables выполняет ничью.

Например:

$('.table-data').DataTable({ 
    drawCallback: function(){ 
     $("img.lazy").lazyload(); 
    } 
}); 

См this jsFiddle для кода и демонстрации.

Answer 2

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

$(document).ready(function() { 
    $("img.lazy").lazyload(); 
    $('.table-data').DataTable({ 
     "drawCallback": function(){ 
      $("img.lazy").lazyload(); 
      setTimeout(function(){ 
       $(window).trigger("scroll") 
      }, 1000); 
     } 
    }); 
}); 

у меня есть пример до here, но я думаю, что вы могли бы использовать обработку на стороне сервера?