From 14b9c83f41efeaa8f5468dcb81986d118e74d2d3 Mon Sep 17 00:00:00 2001 From: Tim Zallmann Date: Wed, 26 Jul 2017 13:13:52 +0200 Subject: Added lazy class to Blob Images + Diffs --- app/views/projects/blob/viewers/_image.html.haml | 2 +- app/views/projects/diffs/viewers/_image.html.haml | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/views/projects/blob/viewers/_image.html.haml b/app/views/projects/blob/viewers/_image.html.haml index 1650aa8197f..82c1239147c 100644 --- a/app/views/projects/blob/viewers/_image.html.haml +++ b/app/views/projects/blob/viewers/_image.html.haml @@ -1,2 +1,2 @@ .file-content.image_file - %img{ 'data-src': blob_raw_url, alt: viewer.blob.name } + %img.lazy{ 'data-src': blob_raw_url, alt: viewer.blob.name } diff --git a/app/views/projects/diffs/viewers/_image.html.haml b/app/views/projects/diffs/viewers/_image.html.haml index 05877ceed3d..3068916f4c3 100644 --- a/app/views/projects/diffs/viewers/_image.html.haml +++ b/app/views/projects/diffs/viewers/_image.html.haml @@ -8,7 +8,7 @@ .image %span.wrap .frame{ class: (diff_file.deleted_file? ? 'deleted' : 'added') } - %img{ 'data-src': blob_raw_path, alt: diff_file.file_path } + %img.lazy{ 'data-src': blob_raw_path, alt: diff_file.file_path } %p.image-info= number_to_human_size(blob.size) - else .image @@ -16,7 +16,7 @@ %span.wrap .frame.deleted %a{ href: project_blob_path(@project, tree_join(diff_file.old_content_sha, diff_file.old_path)) } - %img{ 'data-src': old_blob_raw_path, alt: diff_file.old_path } + %img.lazy{ 'data-src': old_blob_raw_path, alt: diff_file.old_path } %p.image-info.hide %span.meta-filesize= number_to_human_size(old_blob.size) | @@ -28,7 +28,7 @@ %span.wrap .frame.added %a{ href: project_blob_path(@project, tree_join(diff_file.content_sha, diff_file.new_path)) } - %img{ 'data-src': blob_raw_path, alt: diff_file.new_path } + %img.lazy{ 'data-src': blob_raw_path, alt: diff_file.new_path } %p.image-info.hide %span.meta-filesize= number_to_human_size(blob.size) | @@ -41,10 +41,10 @@ .swipe.view.hide .swipe-frame .frame.deleted - %img{ 'data-src': old_blob_raw_path, alt: diff_file.old_path } + %img.lazy{ 'data-src': old_blob_raw_path, alt: diff_file.old_path } .swipe-wrap .frame.added - %img{ 'data-src': blob_raw_path, alt: diff_file.new_path } + %img.lazy{ 'data-src': blob_raw_path, alt: diff_file.new_path } %span.swipe-bar %span.top-handle %span.bottom-handle @@ -52,9 +52,9 @@ .onion-skin.view.hide .onion-skin-frame .frame.deleted - %img{ 'data-src': old_blob_raw_path, alt: diff_file.old_path } + %img.lazy{ 'data-src': old_blob_raw_path, alt: diff_file.old_path } .frame.added - %img{ 'data-src': blob_raw_path, alt: diff_file.new_path } + %img.lazy{ 'data-src': blob_raw_path, alt: diff_file.new_path } .controls .transparent .drag-track -- cgit v1.2.1 From 710d0435f7c54801ff9efafc14a46095f3c83244 Mon Sep 17 00:00:00 2001 From: Tim Zallmann Date: Thu, 27 Jul 2017 11:23:34 +0200 Subject: Changed Images in Blob Viewer to image_tag Updated documentation about the lazy class --- app/views/projects/blob/viewers/_image.html.haml | 2 +- app/views/projects/diffs/viewers/_image.html.haml | 14 +++++++------- doc/development/fe_guide/performance.md | 5 +++-- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/app/views/projects/blob/viewers/_image.html.haml b/app/views/projects/blob/viewers/_image.html.haml index 82c1239147c..5fd22a59217 100644 --- a/app/views/projects/blob/viewers/_image.html.haml +++ b/app/views/projects/blob/viewers/_image.html.haml @@ -1,2 +1,2 @@ .file-content.image_file - %img.lazy{ 'data-src': blob_raw_url, alt: viewer.blob.name } + = image_tag(blob_raw_url, alt: viewer.blob.name) diff --git a/app/views/projects/diffs/viewers/_image.html.haml b/app/views/projects/diffs/viewers/_image.html.haml index 3068916f4c3..aa004a739d7 100644 --- a/app/views/projects/diffs/viewers/_image.html.haml +++ b/app/views/projects/diffs/viewers/_image.html.haml @@ -8,7 +8,7 @@ .image %span.wrap .frame{ class: (diff_file.deleted_file? ? 'deleted' : 'added') } - %img.lazy{ 'data-src': blob_raw_path, alt: diff_file.file_path } + = image_tag(blob_raw_path, alt: diff_file.file_path) %p.image-info= number_to_human_size(blob.size) - else .image @@ -16,7 +16,7 @@ %span.wrap .frame.deleted %a{ href: project_blob_path(@project, tree_join(diff_file.old_content_sha, diff_file.old_path)) } - %img.lazy{ 'data-src': old_blob_raw_path, alt: diff_file.old_path } + = image_tag(old_blob_raw_path, alt: diff_file.old_path) %p.image-info.hide %span.meta-filesize= number_to_human_size(old_blob.size) | @@ -28,7 +28,7 @@ %span.wrap .frame.added %a{ href: project_blob_path(@project, tree_join(diff_file.content_sha, diff_file.new_path)) } - %img.lazy{ 'data-src': blob_raw_path, alt: diff_file.new_path } + = image_tag(blob_raw_path, alt: diff_file.new_path) %p.image-info.hide %span.meta-filesize= number_to_human_size(blob.size) | @@ -41,10 +41,10 @@ .swipe.view.hide .swipe-frame .frame.deleted - %img.lazy{ 'data-src': old_blob_raw_path, alt: diff_file.old_path } + = image_tag(old_blob_raw_path, alt: diff_file.old_path) .swipe-wrap .frame.added - %img.lazy{ 'data-src': blob_raw_path, alt: diff_file.new_path } + = image_tag(blob_raw_path, alt: diff_file.new_path) %span.swipe-bar %span.top-handle %span.bottom-handle @@ -52,9 +52,9 @@ .onion-skin.view.hide .onion-skin-frame .frame.deleted - %img.lazy{ 'data-src': old_blob_raw_path, alt: diff_file.old_path } + = image_tag(old_blob_raw_path, alt: diff_file.old_path) .frame.added - %img.lazy{ 'data-src': blob_raw_path, alt: diff_file.new_path } + = image_tag(blob_raw_path, alt: diff_file.new_path) .controls .transparent .drag-track diff --git a/doc/development/fe_guide/performance.md b/doc/development/fe_guide/performance.md index f25313d6cff..14ac1133cc0 100644 --- a/doc/development/fe_guide/performance.md +++ b/doc/development/fe_guide/performance.md @@ -29,11 +29,12 @@ To improve the time to first render we are using lazy loading for images. This w the actual image source on the `data-src` attribute. After the HTML is rendered and JavaScript is loaded, the value of `data-src` will be moved to `src` automatically if the image is in the current viewport. -* Prepare images in HTML for lazy loading by renaming the `src` attribute to `data-src` +* Prepare images in HTML for lazy loading by renaming the `src` attribute to `data-src` AND adding the class `lazy` * If you are using the Rails `image_tag` helper, all images will be lazy-loaded by default unless `lazy: false` is provided. If you are asynchronously adding content which contains lazy images then you need to call the function -`gl.lazyLoader.searchLazyImages()` which will search for lazy images and load them if needed. +`gl.lazyLoader.searchLazyImages()` which will search for lazy images and load them if needed. +But in general it should be handled automatically through a `MutationObserver` in the lazy loading function. ## Reducing Asset Footprint -- cgit v1.2.1