From 8b557262c6799bad20b3a27d8810ee942aa952d2 Mon Sep 17 00:00:00 2001 From: Eduardo Date: Sun, 27 Oct 2019 11:43:31 +0100 Subject: [PATCH] Implement lazy load --- default.hbs | 2 +- index.hbs | 2 +- page-authors.hbs | 5 +- partials/loop.hbs | 2 +- partials/navigation.hbs | 4 +- src/js/app.js | 27 ++++------- src/js/helpers.js | 23 +++++++++ src/js/home.js | 4 +- src/js/polyfill.js | 90 ------------------------------------ src/js/post.js | 12 ++--- src/package-lock.json | 5 ++ src/package.json | 1 + src/sass/common/_global.scss | 14 ++++++ src/webpack.mix.js | 2 +- 14 files changed, 67 insertions(+), 126 deletions(-) create mode 100644 src/js/helpers.js delete mode 100644 src/js/polyfill.js diff --git a/default.hbs b/default.hbs index 4ef8590..84fc498 100644 --- a/default.hbs +++ b/default.hbs @@ -54,9 +54,9 @@ {{> footer}} {{!-- Common scripts shared between pages --}} + - diff --git a/index.hbs b/index.hbs index 0290cf3..e0bb7ac 100644 --- a/index.hbs +++ b/index.hbs @@ -40,7 +40,7 @@ into the {body} of the default.hbs template --}} {{/if}}
{{#if feature_image}} -
+
{{/if}}
diff --git a/page-authors.hbs b/page-authors.hbs index b7fbd6d..a291825 100644 --- a/page-authors.hbs +++ b/page-authors.hbs @@ -28,10 +28,9 @@ into the {body} of the default.hbs template --}} {{#foreach authors}}
{{#if profile_image}} -
+
{{else}} -
+
{{/if}}

{{name}}

diff --git a/partials/loop.hbs b/partials/loop.hbs index 7046b59..c83da52 100644 --- a/partials/loop.hbs +++ b/partials/loop.hbs @@ -6,7 +6,7 @@ {{/is}} {{#if feature_image}}
-
+
{{else}}
diff --git a/partials/navigation.hbs b/partials/navigation.hbs index 05f921d..fed1313 100644 --- a/partials/navigation.hbs +++ b/partials/navigation.hbs @@ -37,9 +37,9 @@ Also it includes the big submenu.
{{#if feature_image}} -
+
{{else}} -
+
{{/if}}

{{title}}

diff --git a/src/js/app.js b/src/js/app.js index dbd4dd4..fc13f88 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,17 +1,20 @@ import cssVars from 'css-vars-ponyfill' import $ from 'jquery' +import lozad from 'lozad' import Headroom from "headroom.js" import slick from 'slick-carousel' import tippy from 'tippy.js' import AOS from 'aos' import Fuse from 'fuse.js' +import { + isRTL, + formatDate +} from './helpers' cssVars({}) $(document).ready(() => { - const isRTL = $('html').attr('lang') === 'ar' || $('html').attr('lang') === 'he' - - if (isRTL) { + if (isRTL()) { $('html').attr('dir', 'rtl').addClass('rtl') } @@ -95,21 +98,6 @@ $(document).ready(() => { }) } - function formatDate(date) { - if (date) { - return new Date(date).toLocaleDateString( - document.documentElement.lang, - { - year: 'numeric', - month: 'long', - day: 'numeric' - } - ) - } - - return '' - } - $openMenu.click(() => { $menu.addClass('opened') toggleScrollVertical() @@ -217,6 +205,9 @@ $(document).ready(() => { $('[data-aos]').addClass('no-aos-animation') } + const observer = lozad() + observer.observe() + tippy('.js-tooltip') trySearchFeature() diff --git a/src/js/helpers.js b/src/js/helpers.js new file mode 100644 index 0000000..dc16172 --- /dev/null +++ b/src/js/helpers.js @@ -0,0 +1,23 @@ +export const isRTL = () => { + const $html = document.querySelector('html') + return $html.getAttribute('lang') === 'ar' || $html.getAttribute('lang') === 'he' +} + +export const isMobile = (width = '768px') => { + return window.matchMedia(`(max-width: ${width})`).matches +} + +export const formatDate = (date) => { + if (date) { + return new Date(date).toLocaleDateString( + document.documentElement.lang, + { + year: 'numeric', + month: 'long', + day: 'numeric' + } + ) + } + + return '' +} diff --git a/src/js/home.js b/src/js/home.js index 00b3575..35114f9 100644 --- a/src/js/home.js +++ b/src/js/home.js @@ -1,8 +1,8 @@ import $ from 'jquery' import slick from 'slick-carousel' +import { isRTL } from './helpers' $(document).ready(() => { - const isRTL = $('html').attr('lang') === 'ar' || $('html').attr('lang') === 'he' const $featuredArticles = $('.js-featured-articles') if ($featuredArticles.length > 0) { @@ -12,7 +12,7 @@ $(document).ready(() => { prevArrow: '', nextArrow: '', mobileFirst: true, - rtl: isRTL + rtl: isRTL() }) setTimeout(() => { diff --git a/src/js/polyfill.js b/src/js/polyfill.js deleted file mode 100644 index 000c230..0000000 --- a/src/js/polyfill.js +++ /dev/null @@ -1,90 +0,0 @@ -import 'promise-polyfill/src/polyfill'; - -if (!Array.prototype.includes) { - Object.defineProperty(Array.prototype, 'includes', { - value: function (searchElement, fromIndex) { - - if (this == null) { - throw new TypeError('"this" is null or is not defined'); - } - - var o = Object(this); - var len = o.length >>> 0; - - if (len === 0) { - return false; - } - - var n = fromIndex | 0; - var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); - - function sameValueZero(x, y) { - return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y)); - } - - while (k < len) { - if (sameValueZero(o[k], searchElement)) { - return true; - } - k++; - } - - return false; - } - }); -} - -if (!String.prototype.endsWith) { - String.prototype.endsWith = function (search, this_len) { - if (this_len === undefined || this_len > this.length) { - this_len = this.length; - } - return this.substring(this_len - search.length, this_len) === search; - }; -} - -if (!String.prototype.startsWith) { - Object.defineProperty(String.prototype, 'startsWith', { - value: function (search, pos) { - pos = !pos || pos < 0 ? 0 : +pos; - return this.substring(pos, pos + search.length) === search; - } - }); -} - -if (typeof Object.assign != 'function') { - Object.defineProperty(Object, "assign", { - value: function assign(target, varArgs) { - 'use strict'; - if (target == null) { - throw new TypeError('Cannot convert undefined or null to object'); - } - - var to = Object(target); - - for (var index = 1; index < arguments.length; index++) { - var nextSource = arguments[index]; - - if (nextSource != null) { - for (var nextKey in nextSource) { - if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { - to[nextKey] = nextSource[nextKey]; - } - } - } - } - return to; - }, - writable: true, - configurable: true - }); -} - -if (window.NodeList && !NodeList.prototype.forEach) { - NodeList.prototype.forEach = function (callback, thisArg) { - thisArg = thisArg || window; - for (var i = 0; i < this.length; i++) { - callback.call(thisArg, this[i], i, this); - } - }; -} diff --git a/src/js/post.js b/src/js/post.js index 65b5eb4..a51c181 100644 --- a/src/js/post.js +++ b/src/js/post.js @@ -3,6 +3,10 @@ import slick from 'slick-carousel' import stickybits from 'stickybits' import mediumZoom from 'medium-zoom' import fitvids from 'fitvids' +import { + isRTL, + isMobile +} from './helpers' let $aosWrapper = null let $progressCircle = null @@ -12,10 +16,6 @@ let lastDocumentHeight = 0 let circumference = 0 let isTicking = false -function isMobile(width = '768px') { - return window.matchMedia(`(max-width: ${width})`).matches -} - function onScrolling() { lastScrollingY = window.pageYOffset requestTicking() @@ -102,8 +102,6 @@ function prepareProgressCircle() { } $(document).ready(() => { - const isRTL = $('html').attr('lang') === 'ar' || $('html').attr('lang') === 'he' - $aosWrapper = $('.js-aos-wrapper') const $scrollButton = $('.js-scrolltop') const $loadComments = $('.js-load-comments') @@ -153,7 +151,7 @@ $(document).ready(() => { } } ], - rtl: isRTL + rtl: isRTL() }) } diff --git a/src/package-lock.json b/src/package-lock.json index 484bcd6..50ae242 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -8357,6 +8357,11 @@ "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==", "dev": true }, + "lozad": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/lozad/-/lozad-1.14.0.tgz", + "integrity": "sha512-uMGxpXBW15JDGVly3p121Y4jlb/OwmXpnMQR5vnb4GxMeK45NGcmlMrRr47fmLxtSdnGRFm0YdJaVXuudPKDaA==" + }, "lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", diff --git a/src/package.json b/src/package.json index f4558e4..6388cee 100644 --- a/src/package.json +++ b/src/package.json @@ -37,6 +37,7 @@ "fuse.js": "^3.4.2", "headroom.js": "^0.10.3", "jquery": "^3.3.1", + "lozad": "^1.14.0", "medium-zoom": "^1.0.3", "promise-polyfill": "8.1.0", "slick-carousel": "^1.8.1", diff --git a/src/sass/common/_global.scss b/src/sass/common/_global.scss index 64657e9..80e8912 100644 --- a/src/sass/common/_global.scss +++ b/src/sass/common/_global.scss @@ -59,6 +59,20 @@ fieldset { z-index: 5; } +div[data-loaded="true"], +img[data-loaded="true"] { + opacity: 0; + @include animation('fadeIn 0.5s forwards'); + @include keyframes(fadeIn) { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } +} + ::-webkit-input-placeholder { color: $gray; } diff --git a/src/webpack.mix.js b/src/webpack.mix.js index 2acf7da..5074134 100644 --- a/src/webpack.mix.js +++ b/src/webpack.mix.js @@ -16,7 +16,7 @@ mix.webpackConfig({ } }); -mix.js('js/polyfill.js', 'js/') +mix.js('js/helpers.js', 'js/') .js('js/app.js', 'js/') .js('js/home.js', 'js/') .js('js/post.js', 'js/')