Minimized script and css

Author: shinsenter

assets/helpers.js

@@ -64,26 +64,16 @@
             replace(' ' + find + ' ', ' ') + replace).trim();
     }
 
-    function _lazyload() {
-        defer.dom(_queryTarget, 0, '', function (node) {
-            _replaceClass(node, 'defer-loading', 'defer-loaded');
-        }, _options);
-
-        [].slice.call(document.querySelectorAll('style[defer]')).
-            forEach(function(node) {
-                node.media = node.getAttribute('data-media') || 'all';
-            });
-    }
+    /*
+    |--------------------------------------------------------------------------
+    | Fallback for external libraries
+    |--------------------------------------------------------------------------
+    */
 
-    function _copyright(_copyText) {
-        if (console.log) {
-            console.log(_copyText || [
-                'Optimized by defer.php',
-                '(c) 2021 AppSeeds',
-                'Github: https://code.shin.company/defer.php'
-            ].join('\n'));
-        }
-    }
+    // Fix missing dataLayer (for Google Analytics)
+    // See: https://developers.google.com/analytics/devguides/collection/analyticsjs
+    window.ga = window.ga || function () {(window.ga.q = window.ga.q || []).push(arguments)}; window.ga.l = Number(Date());
+    window[_dataLayer] = window[_dataLayer] || [];
 
     /*
     |--------------------------------------------------------------------------
@@ -102,27 +92,30 @@
         return;
     }
 
-    // Fallback for older versions
-    window.defer_helper = {'defermedia': _lazyload};
-
-    /*
-    |--------------------------------------------------------------------------
-    | Fallback for external libraries
-    |--------------------------------------------------------------------------
-    */
-
-    // Fix missing dataLayer (for Google Analytics)
-    // See: https://developers.google.com/analytics/devguides/collection/analyticsjs
-    window.ga = window.ga || function () {(window.ga.q = window.ga.q || []).push(arguments)}; window.ga.l = Number(Date());
-    window[_dataLayer] = window[_dataLayer] || [];
-
     /*
     |--------------------------------------------------------------------------
     | Main
     |--------------------------------------------------------------------------
     */
 
-    _copyright();
-    defer(_lazyload, _delay);
+    // Lazyload all style tags
+    defer(function() {
+        [].slice.call(document.querySelectorAll('style[defer]')).
+            forEach(defer.reveal);
+    }, _delay);
+
+    // Lazyload all media
+    defer.dom(_queryTarget, _delay, 0, function (node) {
+        _replaceClass(node, 'defer-loading', 'defer-loaded');
+    }, _options);
+
+    // Copyright
+    if (console.log) {
+        console.log([
+            'Optimized by defer.php',
+            '(c) 2021 AppSeeds',
+            'Github: https://code.shin.company/defer.php'
+        ].join('\n'));
+    }
 
 })(this, document, console);

assets/styles.css

@@ -20,9 +20,9 @@ embed {
 }
 
 .defer-faded [lazied]{
-  transition: opacity 0.3s;
+  transition: opacity 0.2s;
 }
 
-.defer-faded .defer-loading:not([data-ignore]) {
-  opacity: 0.1!important;
+.defer-faded .defer-loading {
+  opacity: 0.5!important;
 }

public/helpers.min.js

@@ -238,8 +238,6 @@ public static function optimizeElement(ElementNode &$node, DeferOptions &$option
             $lazied = $resolver->lazyload();
 
             if ($lazied) {
-                $node->addClass(DeferConstant::CLASS_DEFER_LOADING);
-
                 if (!empty($fallback)) {
                     $fallback->detach();
                     $node->follow($fallback);

public/styles.min.css

@@ -359,6 +359,7 @@ public function createDataAttr($attr, $placeholder = '')
         if ($placeholder != $value) {
             $this->node->setAttribute($attr, $placeholder);
             $this->node->setAttribute($data_attr, $value);
+            $this->node->addClass(DeferConstant::CLASS_DEFER_LOADING);
         }
 
         return $this;

src/Helpers/DeferOptimizer.php

@@ -119,10 +119,7 @@ public function lazyload()
         // Only defer when it is a CSS node
         // and "onload" attribute is not provided
         $media = $this->node->getAttribute('media');
-
-        if (!empty($media)) {
-            $this->node->setAttribute('data-media', $media);
-        }
+        $this->node->setAttribute('data-media', $media ?: 'all');
 
         // Lazyload the style
         $this->node->setAttribute('media', DeferConstant::TEMPLATE_LAZY_MEDIA_ATTR);