Add scroll-triggered image loading with 1000px distance limit

- Trigger image loader on scroll events (debounced 50ms)
- Only load images within 1000px of viewport edges
- Images further away wait until user scrolls closer

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

wp-content/themes/homeproz/template-parts/property/property-filters.js

@@ -1877,9 +1877,24 @@
         _isRunning: false,
         _activeLoads: 0,
         MAX_PARALLEL: 2,
+        LOAD_DISTANCE: 1000,  // Only load images within 1000px of viewport
 
         init: function() {
             this.process();
+            this.bindScrollEvent();
+        },
+
+        bindScrollEvent: function() {
+            var self = this;
+            var scrollTimeout;
+
+            $(window).on('scroll', function() {
+                // Debounce scroll events
+                clearTimeout(scrollTimeout);
+                scrollTimeout = setTimeout(function() {
+                    self.process();
+                }, 50);
+            });
         },
 
         /**
@@ -1896,6 +1911,7 @@
         /**
          * Get the next element to load, prioritized by viewport proximity
          * Returns element in viewport first, then by distance from viewport
+         * Only returns elements within LOAD_DISTANCE of viewport
          */
         _getNextElement: function() {
             var $elements = $('.property-card-image[data-bg]');
@@ -1904,6 +1920,7 @@
             var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
             var viewportTop = scrollTop;
             var viewportBottom = scrollTop + window.innerHeight;
+            var maxDistance = this.LOAD_DISTANCE;
 
             var inViewport = [];
             var outOfViewport = [];
@@ -1924,14 +1941,20 @@
                     // Out of viewport - calculate distance
                     var distance;
                     if (elementTop > viewportBottom) {
+                        // Element is below viewport
                         distance = elementTop - viewportBottom;
                     } else {
+                        // Element is above viewport
                         distance = viewportTop - elementBottom;
                     }
-                    outOfViewport.push({
-                        el: this,
-                        distance: distance
-                    });
+
+                    // Only include if within LOAD_DISTANCE
+                    if (distance <= maxDistance) {
+                        outOfViewport.push({
+                            el: this,
+                            distance: distance
+                        });
+                    }
                 }
             });
 
@@ -1945,7 +1968,7 @@
                 return a.distance - b.distance;
             });
 
-            // Return first in-viewport, or closest out-of-viewport
+            // Return first in-viewport, or closest out-of-viewport within range
             if (inViewport.length) return inViewport[0].el;
             if (outOfViewport.length) return outOfViewport[0].el;
             return null;