Câu hỏi Bạn có thể liên kết .resize () thành $ (tài liệu) thay vì $ (cửa sổ) không?


Tôi tự hỏi nếu $(document).resize() nên có ý nghĩa hay không?

Vấn đề là khi tài liệu trở nên lớn hơn (tức là một div được mở rộng vì một số lý do) chiều cao của tài liệu thay đổi. Tôi muốn kéo dài hình nền của mình để vùng được thêm vào tài liệu sẽ không trống. Điều gì sẽ là cách tốt nhất để làm điều này?

Về cơ bản, có cách nào để được thông báo khi chiều cao tài liệu đã thay đổi không?

Để rõ ràng, tôi không muốn hình ảnh của mình lặp lại.


8
2018-01-23 20:30


gốc


Chỉ cần thử xem? - mrtsherman
Tôi đã làm và có vẻ như không hoạt động. Nhưng, tôi tưởng tượng rằng nó nên, do đó câu hỏi. Tôi cũng đang tìm một cách khác để làm những gì tôi cần. - Roozbeh15


Các câu trả lời:


Bạn có thể làm điều này với CSS:

body {
    background-image: url(yourImage.png);
    background-size: cover;
}

background-size Là được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Các cover tài sản sẽ làm cho hình ảnh càng nhỏ càng tốt nhưng vẫn bao gồm toàn bộ phần tử. Nó duy trì tỷ lệ khung hình và sẽ cắt nếu cần.


7
2018-01-23 20:34



Đây là một cách tuyệt vời để làm điều đó, nhưng bạn mất hỗ trợ cho hầu như mọi phiên bản của IE (mà không may vẫn phổ biến). Tuy nhiên, +1 vì tôi không biết về "cover". - Mike Lentini
Không có giải pháp hoàn hảo. Tôi sẽ sử dụng CSS khi có thể (vì lý do hiệu suất) và một polyfill cho các trình duyệt cũ hơn. Modernizr để phát hiện xem kích thước nền có được hỗ trợ hay không, jQuery plugin như thế này khi nó không phải. @ Roozbeh15, bạn có thể xem nguồn của plugin đó để xem cách nó được thực hiện. - Ansel Santosa
Đồng ý, CSS luôn là giải pháp tốt nhất. Tôi gần như đã quên về Modernizr, điều này rất hữu ích trong những trường hợp như thế này. Nice đề nghị. - Mike Lentini
Tôi sử dụng bìa, nhưng nó không khắc phục được vấn đề tài liệu được thay đổi kích cỡ. Cover là tuyệt vời mặc dù, chắc chắn rất hữu ích. - Roozbeh15
Sửa đổi CSS không nhận được 'cũ'. tức là nếu phần tử được đặt thành background-size: cover;, nền sẽ luôn luôn bao gồm yếu tố đó. Nếu bạn đang sử dụng nó, điều đó cho biết rằng phần tử được áp dụng cho các kích thước thực sự không thay đổi. Xem trang của bạn trong Firebug hoặc Webkit Inspector để đảm bảo rằng các nút con đang được bố mẹ hoàn toàn chứa. Áp dụng overflow: hidden;với những bậc cha mẹ đó sẽ ngăn chặn vấn đề này. - Ansel Santosa


Tóm lại, vâng, $(document).resize() sẽ phát hiện các thay đổi trong kích thước tài liệu.


2
2018-01-23 20:37





Không có tiêu chuẩn document.resize sự kiện mà bạn có thể tham gia.

Một kỹ thuật phổ biến là kiểm tra khi cây DOM được sửa đổi, do đó có khả năng thay đổi độ cao của tài liệu và sau đó điều chỉnh bất kỳ thứ gì bạn muốn điều chỉnh trong đó: làm thế nào để phát hiện thay đổi kích thước tài liệu trong jquery. Được cảnh báo rằng nó có thể không phải là một điều tốt để làm hiệu suất khôn ngoan.

Firefox cho thấy một sự kiện Phát hiện các thay đổi chiều rộng và chiều cao của tài liệu, nhưng sau đó, chỉ có FF của nó.

Đặt cược tốt nhất của bạn là sử dụng hình ảnh bìa có kiểu tắt và sử dụng màu cuối làm màu nền cho tài liệu. Nó có thể cung cấp cho bạn hiệu ứng này có vẻ như hình ảnh vẫn tiếp tục nhưng không sử dụng hình ảnh. Một ví dụ tốt về điều này là twitter.


1
2018-01-23 21:10



Hah ... vâng theo dõi những thay đổi trong cây DOM chắc chắn là không thực tế cho dự án của tôi. Màu nền sẽ giúp btw như thế nào? Vấn đề là kích thước của cơ thể không cập nhật khi kích thước tài liệu thay đổi. Vì vậy, tôi không biết làm thế nào có một màu nền sẽ khác nhau từ việc sử dụng tài sản bìa nêu trên. - Roozbeh15
Tôi đã không sử dụng cover tài sản, vì vậy không thể nói cho điều đó. Các background-color hoạt động trên Twitter, nơi nó tự động thêm các tweet mới khi bạn cuộn xuống và xuống. - Mrchief


Thử DOMSubtreeModified biến cố:

$(document).on('DOMSubtreeModified', function() {
    ...
});

0
2017-11-26 16:16