Как пост-загрузить изображения после загрузки документа с помощью JavaScript на языках шаблонов, таких как HAML?

Question

Найдя, казалось бы, отличное решение для загрузки изображений после загрузки документа здесь :

 $(function(){
    $.each(document.images, function(){
               var this_image = this;
               var src = $(this_image).attr('src') || '' ;
               if(!src.length > 0){
                   //this_image.src = options.loading; // show loading
                   var lsrc = $(this_image).attr('lsrc') || '' ;
                   if(lsrc.length > 0){
                       var img = new Image();
                       img.src = lsrc;
                       $(img).load(function() {
                           this_image.src = this.src;
                       });
                   }
               }
           });
  });

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

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

Answer 1

Пока, и благодаря предыдущему посту, который заставил меня искать должным образом, похоже, это действительно помогает HAML et al: http://www.appelsiini.net/projects/lazyload

Это действительно сработало красиво и с несколькими классами для загрузки. Был в состоянии изменить мои теги изображений как таковые:

    =image_tag "/assets/spinner.gif", "data-original" => "path_to_image", :class =>"class1 lazy", :size => "100x100"

Затем в конце добавили строку для загрузки нужных мне страниц:

:javascript
  $("img.lazy").lazyload();

Answer 2

Если у вас уже есть src, бесполезно пропускать их с помощью document.ready или $() в jQuery, поскольку изображения будут загружены. Единственный способ не загружать их - это сначала дать display:none css.

Вообще говоря, лучше решить проблему во время рендеринга и сделать ленивый src. Если вы не можете сделать это, вариант css будет альтернативой, но он не даст вам цену за хорошее кодирование.

1. Вы можете добавить класс для lazyLoad для загруженных ленивых изображений и скрыть их с помощью CSS.
2. Получить их на document.ready или $()
3. Ленивая загрузка изображений (по src)
4. Вызовите .removeClass('lazyLoad); на изображении после загрузки.