Kích hoạt tải hình ảnh chậm sau khi hình ảnh đã được thay đổi kích thước

Question

Tôi đang làm việc trên một trang hiển thị hàng trăm hình ảnh cùng một lúc. Tôi đang sử dụng Lazy Load plugin để cho phép trang tải nhanh. Tất cả mọi thứ đang làm việc hoàn hảo tuy nhiên tôi đã thêm một jQuery UI Slider để cho phép người dùng phóng to/thu nhỏ hình ảnh bằng cách kéo một tay cầm. Nếu người dùng thu nhỏ hình ảnh thì có thể hình ảnh đã từng nằm dưới màn hình đầu tiên hiện đã được di chuyển vào khu vực hiển thị. Kể từ khi di chuyển chưa xảy ra, các hình ảnh không được tải.

Tôi đã thêm một sự kiện để kích hoạt tải khi xử lý thay đổi kích thước được kéo nhưng nó gây ra TẤT CẢ hình ảnh để tải và không chỉ những hình ảnh đã nhập vào khu vực có thể xem.

Mã này khá đơn giản:

Đây là mã để kết nối plugin.

$("#pplImages.lazy").lazyload({event : "LoadVisibleImages"}); 

function LoadVisibleImages() { 
    $("#pplImages.lazy").trigger("LoadVisibleImages"); 
} 

Và đây là mã kích hoạt việc tải từ Slider

$("#slider").slider({ 
    min: 25, 
    max: 125, 
    value: 100, 
    slide: function(event, ui) { 
    ResizeImages(ui.value); 
} 
}).slider().bind({ 
    slidestop : function(event,ui) {LoadVisibleImages();} 
}); 

Những gì tôi đang tìm kiếm là một cách để tải CHỈ những hình ảnh mà bây giờ có thể xem được và không ALL hình ảnh trên trang.

Có ai có thể xem tôi đang làm gì sai không?

Answer 1

Đây có thể là sự cố với plugin. Có rất nhiều cuộc thảo luận về interwebs về plugin này không hoạt động trong các trình duyệt hiện đại.

Hãy xem JavaScript Asynchronous Image Loader (JAIL). Tác giả đã viết nó như là một phản ứng trực tiếp cho vấn đề này: Reasons why I wrote the plugin Jquery Asynchronous Image Loader (JAIL).

This example hiển thị một li kích hoạt tải hình ảnh. Bạn có thể sửa đổi mã của bạn để làm như vậy.

Hãy thử điều này:

1. Thêm một div ẩn vào trang của bạn với id "cò"
2. Đặt ResizeImages của bạn hoạt động để mô phỏng một nhấp chuột vào đối tượng cò DOM
3. Thay đổi tải lười biếng của bạn mã để sử dụng plugin JAIL và đặt nó để tải hình ảnh bất cứ khi nào đối tượng kích hoạt được nhấp vào.

Mã của bạn có thể trông giống như thế này:

Javascript

$("#pplImages.lazy").jail({ 
    selector:'#trigger', 
    event: 'click' 
}); 

$("#slider").slider({ 
    min: 25, 
    max: 125, 
    value: 100, 
    slide: function(event, ui) { 
    ResizeImages(ui.value); 
} 
}).slider().bind({ 
    slidestop : function(event,ui) { 
     $('#trigger').click(); //Notice this simulated click event 
    } 
}); 

HTML (chỉ cần thêm này vào trang của bạn)

<div id="trigger" class="hidden"></div> 

Bạn sẽ phải để tinker xung quanh để làm cho công việc này hoàn hảo cho bạn nhưng những điều trên sẽ giúp bạn bắt đầu.