2012-11-23 23 views
7

Tôi đang sử dụng plugin lazyload cho jQuery.Hình ảnh LazyLoad không xuất hiện cho đến sau khi cuộn

Nó hoạt động tốt, ngoại trừ một vấn đề: Hình ảnh src không được hoán đổi cho dữ liệu gốc cho đến khi bạn cuộn. Khi bạn cuộn, thậm chí một chút, tải hình ảnh - nhưng tôi cần chúng tải ngay khi trang đã sẵn sàng.

Lưu ý: Đây hoàn toàn là vấn đề về Chrome/Safari. Tôi không gặp vấn đề này trong Firefox hoặc Opera, hoặc thậm chí là IE9.

Tôi đã thử theo đề xuất của bài đăng này: http://sumanrs.wordpress.com/2011/02/08/jquery-lazy-loading-images-no-scrolling/ Những tiểu bang nào thư viện jQuery cơ bản có khả năng tải chậm mà không cần plugin. Điều này dường như không được như vậy, như những hình ảnh chỉ cần tải trên tải trang ban đầu.

Mọi thông tin chi tiết đều được đánh giá cao!

Trả lời

4

Giải Quyết vấn đề của riêng tôi: bạn phải thiết lập một chiều cao và chiều rộng vào hình ảnh!

0

Bạn có thể bắt chước/kích hoạt một sự kiện cuộn để kích hoạt các hiệu ứng trên pageload: http://api.jquery.com/scroll/

14

Hình ảnh của bạn có nhiều khả năng không có chiều rộng và chiều cao được đặt. Trình duyệt Webkit sẽ thấy hình ảnh trên tài liệu.đã có chiều rộng và chiều cao bằng không. Điều này có nghĩa jQuery sẽ xem xét những hình ảnh vô hình. Lazy Load bỏ qua hình ảnh vô hình theo mặc định. Bạn có ba lựa chọn.

  1. Khắc phục HTML để có thuộc tính chiều rộng và chiều cao trên hình ảnh.
  2. Đặt skip_invisible thành false.
  3. Sử dụng atleast version 1.8.3 của plugin.
+2

tôi đã chỉ ra điều này trong câu trả lời dưới đây – user1380540

+0

Đối với tôi thiết skip_invisible false cố định nó (tôi đã có chiều rộng/chiều cao thiết lập) – Piero

6
$(window).resize(); 

Giúp tôi trong trường hợp của tôi.

+0

đơn giản như vậy, quá hoàn hảo. Cảm ơn bạn! +1 – Paul

3

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

$('img.lazy').lazyload(); 
$(window).scroll(); 
3

Tôi đã có một vấn đề tương tự. Các tùy chọn ngưỡng giải quyết nó cho tôi:

$("img.lazy").lazyload({ 
    threshold : 400 
}); 
0

Đối với tôi, vấn đề là tôi gọi $('img.lazy').lazyload() trong ready

Set bên load để thay thế.

$(window).load(function(){ 
    $('img.lazy').lazyload() 
}); 
0

Tôi đã sử dụng plugin tải jquery chậm nhưng tải đang gây ra sự cố. (ie.) nó mượt mà trong trình duyệt crome. Nhưng tiếc là nó không hoạt động đúng trong con cáo lửa mozilla. Tôi nhận được thông báo này từ con cáo lửa mozilla (Một tập lệnh trên trang này có thể bận hoặc có thể đã ngừng trả lời. Bạn có thể dừng tập lệnh ngay bây giờ, mở tập lệnh trong trình gỡ lỗi hoặc để tập lệnh tiếp tục.). Vì vậy, chỉ cần trả lời bất kỳ ý tưởng tốt hơn để tránh lỗi này.

0

Tôi gặp vấn đề tương tự.

Giải Quyết như vậy:

Chỉ cần thay thế lớp "lười biếng" từ những hình ảnh đầu tiên trên trang.

;-)

Các vấn đề liên quan