From d1c26f14d26be6326e80bb96fd6238da7f76b4c3 Mon Sep 17 00:00:00 2001 From: Sheogorath <sheogorath@shivering-isles.com> Date: Tue, 19 May 2020 22:12:58 +0200 Subject: [PATCH] WIP: Add size indicators to all images This experiment is trying to provide size indicators to the images in order to prevent reflowing of the page on lazy-loading the image. Currently when scrolling down on a page, reloading it and scrolling up, the page starts to jump around when the images are loaded. This attempt tries to fix this. And while working, it produces other problems like height irritations of the images. --- Gemfile | 1 + Gemfile.lock | 2 ++ _plugins/lazy-load.rb | 5 +++++ 3 files changed, 8 insertions(+) diff --git a/Gemfile b/Gemfile index 8a5e8b98..c94206f5 100644 --- a/Gemfile +++ b/Gemfile @@ -6,3 +6,4 @@ gem 'github-pages' gem 'nokogiri' gem 'html-proofer' gem 'octopress-minify-html' +gem 'image_size', '~> 2.0', '>= 2.0.2' diff --git a/Gemfile.lock b/Gemfile.lock index 29a44640..913e8e89 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -98,6 +98,7 @@ GEM htmlentities (4.3.4) i18n (0.9.1) concurrent-ruby (~> 1.0) + image_size (2.0.2) jekyll (3.6.2) addressable (~> 2.4) colorator (~> 1.0) @@ -271,6 +272,7 @@ PLATFORMS DEPENDENCIES github-pages html-proofer + image_size (~> 2.0, >= 2.0.2) jekyll jekyll-paginate-v2 (~> 3.0.0) nokogiri diff --git a/_plugins/lazy-load.rb b/_plugins/lazy-load.rb index b3faea05..a86fe24b 100644 --- a/_plugins/lazy-load.rb +++ b/_plugins/lazy-load.rb @@ -1,4 +1,5 @@ require 'nokogiri' +require 'image_size' Jekyll::Hooks.register([:pages, :posts], :post_render) do |post| rendered_doc = Nokogiri::HTML.parse(post.output) @@ -6,6 +7,10 @@ Jekyll::Hooks.register([:pages, :posts], :post_render) do |post| if images.length > 0 images.each do |img| img['loading'] = "lazy" + path = img['src'].gsub(Regexp.new(Regexp.escape(post.site.config['url'])), '') + img_file = ImageSize.path(File.join(".", path)) + img['width'] = img_file.width + img['height'] = img_file.height end post.output = rendered_doc.to_html end -- GitLab