Поддержка добавления отложенной загрузки изображений в Markdown.

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

введите описание изображения здесь

Но я не хочу идти по этому пути. Потому что, если кто-нибудь обновит kramdown, я потеряю эти правки. Есть ли другой способ сделать это без изменения синтаксиса исходного изображения?

Синтаксис исходного изображения: ![](some image link)

Текущий выход (без редактирования выше): <img src="some image link" alt=""/>

Ожидаемый результат: <img data-src="some image link" alt=""/>


ruby jekyll markdown kramdown jekyll-extensions
person Arasu RRK    schedule 22.08.2015    source источник
comment
я думаю, вы немного смущены src vs data-src. Последний - это просто невидимый HTML-контейнер, обычно используемый для javascript. Это не совсем ленивая загрузка. Вам все равно придется подключиться к нему с помощью некоторого вызова AJAX, но в этом случае вы можете легко изменить src html. Обновление JavaScript свойства src, вероятно, является ответом на ваш вопрос.   -  person engineerDave    schedule 22.08.2015
comment
@engineerDave Я буду использовать плагин lazyload, чтобы проделать этот трюк. Но я не упомянул здесь...   -  person Arasu RRK    schedule 22.08.2015

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете изменить полученный HTML-код, используя Nokogiri, это почти весь код, который вам нужен для вашей задачи.

def responsive_img_src(html_source)
  doc = Nokogiri::HTML::Document.parse('<html></html>', nil, 'UTF-8')
  fragment = Nokogiri::HTML::DocumentFragment.new(doc, html_source)
  fragment.css('img').each { |img| img['data-src'] = img['src'] }
  return fragment.to_html
end

Вы не можете напрямую использовать Nokogiri::HTML(html_source) для синтаксического анализа исходного кода, потому что он преобразует вывод в правильно сформированный HTML-документ. Вот почему вам нужен DocumentFragment.

person Leonid Shevtsov    schedule 22.08.2015

arrow_upward
1
arrow_downward

Если вы используете kramdown, вы можете добавить атрибуты в свой блок уценки. см. документацию

В вашем случае An image: ![gras](){: data-src="some image link"} поможет.

person David Jacquel    schedule 22.08.2015
comment
Да. Я знаю этот синтаксис. Но у меня есть большое количество файлов уценки. Я могу заменить существующие синтаксисы изображений с помощью регулярных выражений. В будущем я не уверен, что все в организации будут следовать этому. Так что я хочу использовать синтаксис по умолчанию - person Arasu RRK; 22.08.2015