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