Tại sao tải trước hình ảnh không hiệu quả?

Question

Dự án CMS của tôi có màn hình đăng nhập web 2.0 phong cách mờ dần trên màn hình bằng javascript. Làm thế nào mà mặc dù tôi đã thực hiện 120% chắc chắn rằng hình ảnh được tải trước (tôi đã sử dụng màn hình tài nguyên trong các công cụ phát triển), chúng vẫn mất một giây để hiển thị khi màn hình đăng nhập của tôi xuất hiện. Nó hoàn toàn phá hủy fanciness! Hãy xem:

http://www.dahwan.info/Melior (liên kết bị hỏng)

Khi bạn nhấp vào đăng nhập, màn hình được cho là mờ dần để tối sử dụng một hình ảnh 75% alpha 1px png. Mặc dù hình ảnh được tải sẵn, nó không hiển thị cho đến sau khi hoạt ảnh được thực hiện. Tuy nhiên, nếu bạn nhấp vào hủy và đăng nhập lại, hoạt ảnh sẽ diễn ra suôn sẻ và hoàn hảo.

Có ai có thể nghĩ ra giải pháp cho vấn đề này không? Tôi đang dùng nó với phần còn lại của GUI của CMS. Nó giống như không có hình ảnh tải trước những gì bao giờ hết.

Cám ơn câu trả lời

EDIT: À đúng rồi, tôi đang phát triển CMS này cho 5.0.375.99 Google Chrome, thêm khả năng tương thích trình duyệt đa sau. Xin lỗi vì đã thoát khỏi điều đó ra

Answer 1

Tôi đã đưa ra giải pháp cho vấn đề của mình. Bây giờ tôi đã thử nghiệm điều này trong ba trình duyệt trên hai máy tính khác nhau với kết quả hoàn hảo. Tóm lại, trong chức năng tải trước hình ảnh của tôi trong javascript, tôi đã thêm từng hình ảnh vào DOM trong thẻ Div vô hình.

$('#img_preload').append($('<img />').attr('src', img.src)); 

Hình ảnh hiện được thêm vào bộ nhớ trong máy tính cấp thấp của tôi, chúng xuất hiện ngay lập tức khi CMS của tôi cần chúng.

Cảm ơn nhận xét của bạn :)

Answer 2

Chuỗi giao diện người dùng chỉ có thể quản lý một tác vụ cùng một lúc - nó sẽ thực thi javascript hoặc cập nhật giao diện người dùng. Nếu có nhiều phân tích cú pháp javascript/thực thi trước khi mã tải trước hình ảnh, điều đó có thể gây ra sự chậm trễ.

Một đề xuất khác là vô hiệu hóa khả năng nhấp trên liên kết đăng nhập cho đến sau khi hình ảnh được phát hiện trên trang.

Để làm như vậy là khá đơn giản:
chức năng disableBtn (el) {var
btn = document.getElementById (el);
var btnId = btn.id;
btn.disabled = true;
}

Để bật lại, hãy đặt btn.disabled = false (sau khi phát hiện thấy hình ảnh của bạn đã được thêm vào DOM).

Answer 3

Bạn cũng có thể tải trước chúng vào một mảng. Vấn đề của bạn có thể được gây ra bởi những gì được gọi là "thu gom rác thải". Đây là nơi trình duyệt tìm kiếm các đối tượng đang tiêu thụ bộ nhớ mà không còn có thể hiện trên màn hình và không được tham chiếu bởi bất kỳ thứ gì khác trong bộ nhớ.

Nếu bạn tải trước hình ảnh vào độ tuổi trên web, chúng sẽ được tải vào bộ nhớ cache. Vì vậy, họ vẫn nên xuất hiện lại khi được tham chiếu lại. Tuy nhiên, hình ảnh cũng có thể biến mất nếu hết hạn bộ nhớ cache không được đặt trong một khoảng thời gian đủ dài cho các loại tệp này.

Sự cố của bạn cũng có thể do trình duyệt cụ thể .... Tôi nhận thấy rằng luôn luôn tốt nhất là tạo "neo" cho nội dung được tải trước bằng cách đặt chúng vào mảng hình ảnh và sau đó sử dụng mảng để gọi hình ảnh khi cần thay vì URL hình ảnh (URI).

Đây là một bài viết nhanh và bẩn bao gồm chủ đề này.

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

Answer 4

Một thông tin hữu ích về vấn đề này:

Giải pháp Codemonkey làm việc bởi vì, bằng cách đặt những hình ảnh trong một div ẩn, trình duyệt phải giữ những hình ảnh trong bộ nhớ và sẵn sàng cho một có thể thay đổi khả năng hiển thị của div. Nếu người dùng cần thay đổi chế độ hiển thị của div từ ẩn thành chặn, nó phải được thực hiện ngay lập tức. Đây là lý do tại sao chỉ cần tải tất cả các hình ảnh vào một mảng không hoạt động đúng.