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à div được mở rộng vì một số lý do) chiều cao của tài liệu sẽ 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.
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à supported by all modern browsers.
Thuộc tính cover sẽ làm cho hình ảnh càng nhỏ càng tốt nhưng vẫn che hoàn toàn phần tử. Nó duy trì tỷ lệ khung hình và sẽ cắt nếu cần.
Đâ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 (không may là vẫn phổ biến). Tuy nhiên, +1 vì tôi không biết về "cover". –
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] (http://www.modernizr.com/) để phát hiện nếu kích thước nền được hỗ trợ, [jQuery plugin như thế này] (http://nooshu.com/jquery-plug-in-scalable-background- hình ảnh) khi nó không phải là. @ Roozbeh15, bạn có thể xem nguồn của plugin đó để xem cách nó được thực hiện. –
Đồ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ị. –
Tóm lại, có, $(document).resize() sẽ phát hiện các thay đổi trong kích thước tài liệu.
Không có sự kiện tiêu chuẩn document.resize mà bạn có thể tham gia.
Kỹ thuật thông thường 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 đó: how to detect document size change in 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 sự kiện Detecting document width and height changes, nhưng sau đó, chỉ FF của nó.
Đặt cược tốt nhất của bạn là sử dụng hình ảnh bìa loại loại bỏ 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.
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 thuộc tính 'cover', vì vậy không thể nói cho điều đó. Điều 'background-color' hoạt động trên Twitter, nơi nó tự động thêm các tweet mới khi bạn di chuyển xuống và xuống. – Mrchief
Hãy thử DOMSubtreeModified sự kiện:
$(document).on('DOMSubtreeModified', function() {
...
});
Chỉ cần cố gắng và xem? – mrtsherman
Tôi đã làm và dường 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