Lazyload

Yarik
1 parent a1dded18
Showing 4 changed files with 97 additions and 2 deletions Show diff stats
assets/LazyAsset.php
assets/LazyLoadAsset.php
components/artboximage/ArtboxImageHelper.php
resources/artbox-lazy.js
+<?php
+
+namespace artweb\artbox\assets;
+
+use yii\web\AssetBundle;
+
+/**
+ * Main frontend application asset bundle.
+ */
+class LazyAsset extends AssetBundle
+{
+    public $sourcePath = '@artweb/artbox/resources';
+    public $js = [
+        'artbox-lazy.js',
+    ];
+
+    public $depends = [
+        'artweb\artbox\assets\LazyLoadAsset',
+    ];
+
+}
+<?php
+
+namespace artweb\artbox\assets;
+
+use yii\web\AssetBundle;
+
+/**
+ * Main frontend application asset bundle.
+ */
+class LazyLoadAsset extends AssetBundle
+{
+    public $sourcePath = '@bower/jquery.lazyload';
+    public $js = [
+        'jquery.lazyload.js',
+    ];
+
+    public $depends = [
+        'yii\web\JqueryAsset',
+    ];
+
+}
@@ -53,14 +53,25 @@
          * @param array|string $preset
          * @param array        $imgOptions
          * @param int          $quality
+         * @param bool         $lazy
          *
          * @return string
          * @see Html::img()
          */
-        public static function getImage($file, $preset, $imgOptions = [], $quality = 65)
+        public static function getImage($file, $preset, $imgOptions = [], $quality = 65, $lazy = false)
         {
             $preset_alias = is_array($preset) ? array_keys($preset)[ 0 ] : null;
-            return Html::img(self::getImageSrc($file, $preset, $preset_alias, $quality), $imgOptions);
+            $src = self::getImageSrc($file, $preset, $preset_alias, $quality);
+            if($lazy) {
+                if(isset($imgOptions['class'])) {
+                    $imgOptions['class'] = $imgOptions['class'].' artbox-lazy';
+                } else {
+                    $imgOptions['class'] = 'artbox-lazy';
+                }
+                return Html::img('');
+            } else {
+                return Html::img($src, $imgOptions);
+            }
         }
  
         /**
+$(function() {
+    $('img.artbox-lazy').lazyload();
+    lazyThreshold();
+    lazyEvent();
+    lazyEffect();
+});
+function lazyThreshold() {
+    $.each($('img.artbox-lazy-threshold'), function(index, value) {
+        var threshold = 200;
+        var attribute = $(value).attr('data-threshold');
+        if(attribute) {
+            threshold = attribute;
+        }
+        this.lazyload({
+            threshold: threshold
+        });
+    });
+}
+function lazyEvent() {
+    $.each($('img.artbox-lazy-event'), function(index, value) {
+        var event = 'click';
+        var attribute = $(value).attr('data-event');
+        if(attribute) {
+            event = attribute;
+        }
+        this.lazyload({
+            event: event
+        });
+    });
+}
+function lazyEffect() {
+    $.each($('img.artbox-lazy-effect'), function(index, value) {
+        var effect = 'fadeIn';
+        var attribute = $(value).attr('data-effect');
+        if(attribute) {
+            effect = attribute;
+        }
+        this.lazyload({
+            effect: effect
+        });
+    });
+}
 \ No newline at end of file