Tôi có một trang với một số phòng trưng bày bao gồm cả accordion và thanh trượt. Vấn đề là trang mất mãi mãi để tải. Có cách nào để gói một hình ảnh trong một đoạn mã hay áp dụng một lớp vào nó để ép buộc nó tải chỉ sau khi mọi thứ khác được nạp?Tải hình ảnh chậm trễ với jQuery
Chắc chắn bạn có thể. Thay src img của bạn thuộc tính với một "#", và thêm một thuộc tính tùy chỉnh, một cái gì đó như thế này:
<img src="#" delayedsrc="http://mydomain.com/myimage.png"/ >
Sau đó, thêm một dòng javascript khi tải trang của bạn mà không một cái gì đó như thế này (chưa được kiểm tra, nhưng bạn sẽ có được ý tưởng):
$('img').each(function(){
$(this).attr('src', $(this).attr('delayedsrc'));
});
chỉ giữ lại một hình ảnh vào HTML để xem rằng có một cái gì đó để bắt đầu, sau đó tiêm phần còn lại sử dụng jQuery với
$(document).ready(function() {
//load rest of the images
});
Bạn cũng có thể sử dụng tải sự kiện ers và AJAX hoặc "tải khi bạn đi", chỉ cần xây dựng một hàm gọi lại đơn giản nếu đó là thư viện tự động xoay hoặc tải khi nhấp.
Nếu bạn đang sử dụng jQuery (và tôi giả sử bạn là như thế này được gắn thẻ như vậy) hãy xem Lazy Load Plugin for jQuery. Nó trì hoãn việc tải hình ảnh bên ngoài khung nhìn cho đến khi người dùng cuộn đến chúng.
Cập nhật 2015: Plugin này đã bị hỏng tại một thời điểm, nhưng bây giờ lại hoạt động trở lại. Nhận xét cuối cùng nói nhiều, nhưng tôi gần như đã bỏ lỡ nó vì nó đã bị ẩn trong các bình luận bị sập.
Liệu nó có hiển thị hình ảnh về mặt kỹ thuật trong chế độ xem chỉ che khuất không? – DCD
Kiểm tra và tìm hiểu :-) Plugin rất dễ sử dụng. – Erik
Plugin đó không được hỗ trợ nữa - (từ trang web) "Tải trọng Lười biếng hiện không thể sử dụng được. Nó không hoạt động với các trình duyệt mới nhất như mong đợi. Tôi hiện không có thời gian cập nhật mã. Các bản vá luôn được chào đón. bạn tìm thấy một giải pháp chỉ cần ngã ba và gửi một yêu cầu kéo. Cảm ơn! " –
Cách dễ dàng để trì hoãn tải hình ảnh (và iFrames) là kết hợp giữa JS thuần túy, jQuery.data() và thuộc tính dữ liệu HTML5 tùy chỉnh *. Src của hình ảnh ban đầu có thể trỏ đến một GIF tải. Thuộc tính data- * chứa đường dẫn URL của hình ảnh mà bạn muốn tải. JS thuần túy thiết lập độ trễ (3000 mili giây trong ví dụ bên dưới), và sau đó thực thi jQuery.data(), đặt src của hình ảnh thành hình ảnh dự định.
Ví dụ bên dưới thực hiện trên mỗi hình ảnh có class = "load-delay".
sống Ví dụ: http://seandebutts.com/2013/07/03/html5-delay-loading-images-iframes/
MÃ
JS và jQuery:
$(document).ready(function() {
setTimeout(function() {
$('.load-delay').each(function() {
var imagex = $(this);
var imgOriginal = imagex.data('original');
$(imagex).attr('src', imgOriginal);
});
}, 3000);
});
HTML và jQuery Thư viện:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<h1>Loading-Delayed Image</h1>
<img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" />
</body>
</html>
Điều đó làm cho mẹo này đẹp hơn bất kỳ plugin "tải chậm" nào hoặc tương tự, tuyệt vời cho các trang đơn lẻ không có liên quan đến cuộn, nơi tất cả tương tác diễn ra trong màn hình đầu tiên, để nói. Nhiều đánh giá cao! – Systembolaget
Xảo quyệt, đó có thể chỉ là những gì tôi cần. – DCD
Bạn có thể cần phải điền một ô trống.gif thay vì # để giữ cho IE vui vẻ, nhưng nó sẽ hoạt động. – jvenema
Tôi thích nó, cách tiếp cận tốt đẹp :) – Justin