Tôi đã nhận thấy điều này trong nhiều trang web "hiện đại" (ví dụ: tìm kiếm hình ảnh trên facebook và google), nơi hình ảnh dưới màn hình đầu tiên chỉ tải khi người dùng cuộn xuống trang đủ để đưa chúng vào trong vùng hiển thị có thể nhìn thấy ( khi xem nguồn, trang hiển thị X số lượng <img>thẻ nhưng chúng không được tải ngay từ máy chủ ). Kỹ thuật này được gọi là gì, nó hoạt động như thế nào và nó hoạt động trong bao nhiêu trình duyệt. Và có một plugin jQuery có thể đạt được hành vi này với mã hóa tối thiểu không.

Biên tập

Phần thưởng: ai đó có thể giải thích nếu có "onScrolledIntoView" hoặc sự kiện tương tự cho các phần tử HTML. Nếu không, các plugin này hoạt động như thế nào?

Một số câu trả lời ở đây dành cho trang vô hạn. Những gì Salman đang yêu cầu là tải hình ảnh một cách lười biếng.

Cắm vào

Bản giới thiệu

CHỈNH SỬA: Các plugin này hoạt động như thế nào?

Đây là một giải thích đơn giản:

1. Tìm kích thước cửa sổ và tìm vị trí của tất cả các hình ảnh và kích thước của chúng
2. Nếu hình ảnh không có trong kích thước cửa sổ, hãy thay thế nó bằng một trình giữ chỗ có cùng kích thước
3. Khi người dùng cuộn xuống và vị trí của hình ảnh <scroll + window height, hình ảnh sẽ được tải

Dave Artz của AOL đã có một bài nói chuyện tuyệt vời về tối ưu hóa tại Hội nghị jQuery Boston năm ngoái. AOL sử dụng một công cụ gọi là Sonar để tải theo yêu cầu dựa trên vị trí cuộn. Kiểm tra mã để biết chi tiết về cách nó so sánh scrollTop (và những cái khác) với phần tử bù để phát hiện xem một phần hoặc tất cả phần tử có hiển thị hay không.

jQuery Sonar

Dave nói về Sonar trong các slide này . Sonar bắt đầu trên slide 46, trong khi cuộc thảo luận tổng thể về "tải theo yêu cầu" bắt đầu trên slide 33.

Tôi đã nghĩ ra phương pháp cơ bản của riêng mình mà dường như hoạt động tốt (cho đến nay). Có thể có hàng tá điều mà một số địa chỉ script phổ biến mà tôi chưa nghĩ ra.

Lưu ý - Giải pháp này nhanh và dễ thực hiện nhưng tất nhiên là không hiệu quả. Chắc chắn hãy xem xét Intersection Observer mới như Apoorv đã đề cập và được giải thích bởi developer.google nếu hiệu suất là một vấn đề.

JQuery

$(window).scroll(function() {
    $.each($('img'), function() {
        if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
            var source = $(this).data('src');
            $(this).attr('src', source);
            $(this).removeAttr('data-src');
        }
    })
})

Mã html mẫu

<div>
    <img src="" data-src="pathtoyour/image1.jpg">
    <img src="" data-src="pathtoyour/image2.jpg">
    <img src="" data-src="pathtoyour/image3.jpg">
</div>

Giải thích

Khi cuộn trang, mỗi hình ảnh trên trang sẽ được chọn ..

$(this).attr('data-src') - nếu hình ảnh có thuộc tính data-src

và những hình ảnh đó cách cuối cửa sổ bao xa ..

$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)

điều chỉnh + 100 thành bất kỳ thứ gì bạn thích (- 100 chẳng hạn)

var source = $(this).data('src');- nhận giá trị của data-src=aka url hình ảnh

$(this).attr('src', source); - đặt giá trị đó vào src=

$(this).removeAttr('data-src'); - loại bỏ thuộc tính data-src (để trình duyệt của bạn không lãng phí tài nguyên với những hình ảnh đã được tải)

Thêm vào mã hiện có

Để chuyển đổi html của bạn, trong một trình soạn thảo, chỉ cần tìm kiếm và thay thế src="bằngsrc="" data-src="

Có một plugin cuộn vô hạn khá hay ở đây

Tôi chưa bao giờ tự mình lập trình một cái nào, nhưng tôi sẽ tưởng tượng đây là cách nó hoạt động.

1. Một sự kiện được liên kết với cửa sổ cuộn

   $(window).scroll(myInfinteScrollFunction);

2. Hàm được gọi sẽ kiểm tra xem đầu cuộn có lớn hơn kích thước cửa sổ hay không

   function myInfiniteScrollFunction() {  
       if($(window).scrollTop() == $(window).height())  
       makeAjaxRequest();  
   }

3. Một yêu cầu AJAX được thực hiện, chỉ định kết quả # nào để bắt đầu, số lượng cần lấy và bất kỳ tham số nào khác cần thiết cho việc kéo dữ liệu.

   $.ajax({
       type: "POST",
       url:  "myAjaxFile.php",
       data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
       success: myInfiniteLoadFunction(msg)
   });

4. Ajax trả về một số nội dung (rất có thể được định dạng JSON) và chuyển chúng vào hàm loadnig.

Hy vọng điều đó có ý nghĩa.

Việc tải hình ảnh một cách lười biếng bằng cách gắn trình nghe vào các sự kiện cuộn hoặc bằng cách sử dụng setInterval rất không hiệu quả vì mỗi lệnh gọi tới getBoundsClientRect () buộc trình duyệt phải bố trí lại toàn bộ trang và sẽ giới thiệu một lượng lớn trang web của bạn.

Sử dụng Lozad.js (chỉ 569 byte không có phụ thuộc), sử dụng IntersectionObserver để tải hình ảnh một cách hiệu quả.

Con dao của Quân đội Thụy Sĩ về tải hình ảnh lười biếng là ImageLoader của YUI .

Bởi vì vấn đề này còn nhiều thứ hơn là chỉ xem vị trí cuộn.

Liên kết này làm việc cho tôi bản demo

1.Tải plugin jQuery loadScroll sau thư viện jQuery, nhưng trước thẻ đóng nội dung.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="jQuery.loadScroll.js"></script>

2. Thêm hình ảnh vào trang web của bạn bằng thuộc tính Html5 data-src. Bạn cũng có thể chèn trình giữ chỗ bằng cách sử dụng thuộc tính src của img thông thường.

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">

3.Gọi plugin trên các thẻ img và chỉ định thời lượng của hiệu ứng fadeIn khi hình ảnh của bạn được hiển thị

$('img').loadScroll(500); // in ms

Tôi đang sử dụng jQuery Lazy . Tôi mất khoảng 10 phút để kiểm tra và một hoặc hai giờ để thêm vào hầu hết các liên kết hình ảnh trên một trong các trang web của tôi ( CollegeCarePackages.com ). Tôi không có mối quan hệ nào (không có / không) dưới bất kỳ hình thức nào với nhà phát triển, nhưng nó đã giúp tôi tiết kiệm rất nhiều thời gian và về cơ bản đã giúp cải thiện tỷ lệ thoát của chúng tôi cho người dùng di động và tôi đánh giá cao điều đó.