Bước 2: Thực hiện preload ảnh. Quản lý tải lên hình ảnh. Tải hình ảnh lười biếng để giảm tải máy chủ
Khi tạo thư viện trên website, bạn cần tải hình ảnh trước để không xảy ra lỗi script hoặc người dùng không nhìn thấy những mảnh hình ảnh chưa tải.
Có lúc, tôi đang tìm kiếm một trình tải trước tốt cho những mục đích như vậy, nhưng tôi không thể tìm ra giải pháp nào có thể khiến tôi hoàn toàn hài lòng. Tôi đã phải viết của riêng tôi.
Nó có chức năng cơ bản cho phép bạn thực hiện hai chức năng chính: tải hình ảnh lên và sau đó gọi lại. Nhưng nó cũng có những tính năng riêng của nó. Nó có thể tải từng ảnh một theo thứ tự chúng được đặt trong mảng. Không chỉ một lần, mà là hai ba-N. Và đối với mỗi lần tải, một lệnh gọi lại có thể được thực thi. Nhưng đó không phải là tất cả: sau khi tải hình ảnh cuối cùng, lệnh gọi lại cuối cùng sẽ được thực thi, cho biết rằng tất cả hình ảnh đã được tải.
Cách sử dụngCó hai tùy chọn để sử dụng jQuery.preload.
Đầu tiên là chuyển (các) địa chỉ của hình ảnh:
$.preload(hình ảnh, , );
- hình ảnh
Địa chỉ hình ảnh có thể được nhập dưới dạng một chuỗi (đối với một hình ảnh) hoặc dưới dạng một mảng. - phần
Tiếp theo là một tham số tùy chọn cho biết số lượng hình ảnh cần tải cùng một lúc. 0 có nghĩa là mọi thứ cùng một lúc, giá trị mặc định. - gọi lại
Và cuối cùng, callback là một chức năng sẽ được thực thi sau khi hình ảnh được tải. Nó có thể được cung cấp tham số cuối cùng của riêng nó, tham số này nhận giá trị đúng nếu phần này là phần cuối cùng.
Trường hợp sử dụng thứ hai là tải xuống tất cả hình ảnh và hình nền trong phần tử:
$("#elem").preload();
- gọi lại
Một chức năng sẽ được thực thi sau khi tất cả hình ảnh đã được tải.
- — các hình ảnh sẽ được tải lần lượt, sau khi tải từng hình ảnh, lệnh gọi lại sẽ kích hoạt và sau khi tải hình ảnh cuối cùng, lệnh gọi lại cuối cùng sẽ kích hoạt.
- — lệnh gọi lại hiển thị các hình ảnh bị ẩn trước đó nhưng đã được tải.
Vì hoạt động chính xác yêu cầu plugin phiên bản jQuery 1.6 hoặc cao hơn.
Khi bạn tham gia vào việc bố cục và tạo ra tất cả các loại thủ thuật bằng hình ảnh (thường là thay thế khi di chuột hoặc thậm chí hoạt hình của chúng), sắc thái như vậy luôn xuất hiện khi tải hình ảnh/hình ảnh bị trì hoãn. Thoạt nhìn, vấn đề không quá nghiêm trọng và ngay sau khi tải ảnh, mọi thứ đều hoạt động tốt, nhưng đây là lần đầu tiên hiệu ứng di chuột, cố gắng tải một hình ảnh và thay thế nó cùng lúc, tạo ra hiệu ứng giật, thường trông không đẹp mắt và có thể làm hỏng ấn tượng đầu tiên của người dùng trang web của bạn.
Với hoạt hình, mọi thứ thậm chí còn tồi tệ hơn. Ví dụ, hãy tưởng tượng rằng bạn cần triển khai trong JS (JQuery) một chiếc ô tô đang chạy qua, được thay thế sau 2 giây bằng một chiếc xe buýt. Hình ảnh ô tô và xe buýt khác nhau. Đồng thời, chúng sẽ chỉ bắt đầu tải vào thời điểm trình duyệt nhận được liên kết đến chúng với khả năng tải ( tức là ở phần đầu của hoạt ảnh). Sẽ mất vài giây để tải một hình ảnh như vậy. Nghĩa là, hóa ra trong một nửa hoạt ảnh dài hai giây, hình ảnh này sẽ chỉ được tải - đây không phải là thứ tự.
Nhưng tất cả điều này có thể được khắc phục bằng cách tải trước ( tải trước) hình ảnh, cho phép bạn tải hình ảnh vào bộ đệm ngay lập tức khi tải trang chính ( hoặc thậm chí trước đó). Đây là những gì tôi muốn nói trong bài viết này.
Tải trước hình ảnh bằng JavaScript (JQuery) Theo tôi, tùy chọn tải bằng JS là một trong những tùy chọn tốt nhất, đặc biệt nếu bạn đang xử lý hoạt ảnh. Bản chất của nó là bạn chỉ cần tạo một bản sao của hình ảnh bằng JavaScript và tải nó vào bộ đệm của trình duyệt, do đó, nếu cần, bạn sẽ không cần tải hình ảnh nữa vì nó đã được tải sẵn.Có vẻ phức tạp? =) Nhưng nó trông giống như mã này, nơi bạn cần thay thế đường dẫn đến hình ảnh bằng đường dẫn của riêng bạn và mọi thứ sẽ hoạt động:
//tạo nên hàm jQuery, nó sẽ tải hình ảnh vào bộ đệm jQuery.preloadImages = function() ( for(var i = 0; i< arguments.length; i++)
{
jQuery("").attr("src", đối số [ i ]); ) ); // chỉ định đường dẫn đến hình ảnh cần được tải $.preloadImages("/tpl/testimg.png");
Nếu bạn cần tải nhiều hình ảnh, bạn có thể chỉ cần liệt kê chúng cách nhau bằng dấu phẩy, như sau:
$.preloadImages("imageone.jpg", "dirname/imageok.jpg", "/tpl/testimg.png");
Có thể có bất kỳ số lượng hình ảnh. Điều chính là đừng quên chức năng JQuery, nếu không tải trước nó sẽ không hoạt động.
Phương pháp này cũng có nhược điểm, chẳng hạn như nó phụ thuộc vào việc JS có được bật trong trình duyệt của người dùng hay không. Nhưng trên kinh nghiệm cá nhân Tôi sẽ nói rằng nếu bạn so sánh mình với những người đã tắt JS thì công nghệ hiện đại Rất nhiều việc xây dựng trang web sẽ không thể thực hiện được. Và tôi nghĩ không có nhiều người dùng như vậy. Nói chung là bạn cần phải làm theo số đông và số đông không tùy chỉnh trình duyệt đến mức như vậy.
Cá nhân tôi thích sử dụng phương pháp tải này trong nhiều dự án vì nó thuận tiện khi thực hiện.
Tải trước hình ảnh bằng các tính năng HTML5 mới Phương pháp này tương đối mới do bản thân công nghệ HTML5 đã được ra mắt cách đây không lâu. Bản chất của nó là bạn đặt một liên kết tới hình ảnh thông qua thẻ liên kết và trong thuộc tính rel (loại phần tử được tải), bạn chỉ ra rằng đây là phần tải trước. Do đó, trình duyệt nhìn thấy thẻ này và tự động tải hình ảnh vào bộ đệm.Điều này được thực hiện bằng cách thêm vào Mã HTML thích thẻ này ( chỉ cần thay đổi liên kết đến hình ảnh của riêng bạn):
Ở đây rel chứa 2 tham số: trình diễn trước- dành cho Bệ hạ Chrome và tìm nạp trước- cho các trình duyệt khác. Nếu bạn muốn tải lên số lớn hơn hình ảnh, sau đó sao chép thẻ và thay thế liên kết số lượng yêu cầu một lần:
Ưu điểm của phương pháp này là việc vô hiệu hóa JS sẽ không ảnh hưởng đến việc tải trước dưới bất kỳ hình thức nào, nhưng cá nhân tôi thấy 2 nhược điểm rõ ràng:
1) Công nghệ HTML5 và do đó phương pháp tải trước này không được tất cả các trình duyệt hỗ trợ. Tuy nhiên, hiện nay, các trình duyệt đang được cập nhật và hầu hết các trình duyệt đang phát triển hiện đại đều nhận ra HTML5, nhưng điều này vẫn chưa đạt mức lý tưởng.
2) Rắc rối hơn so với cách triển khai JS, vì mỗi hình ảnh sẽ phải được mô tả bằng một thẻ riêng ( và với thông số khác nhau rel để đạt được điều gì đó gần giống với khả năng tương thích giữa nhiều trình duyệt).
Nói chung, tôi nghĩ rằng phương pháp này đầy hứa hẹn, nhưng cần có thời gian. Ngay bây giờ nó thiếu tính linh hoạt.
Tải trước hình ảnh trong HTML đã được thử nghiệm theo thời gian Ý tưởng đầu tiên thường xuất hiện trong đầu là html thuần túy- điều này là để tạo một khối div với tham số CSS "không trưng bày;", có một hình ảnh trong đó và nó sẽ trở thành một bản tải trước. Điều này thực sự không hoạt động, trình duyệt sẽ chỉ bắt đầu tải vào bộ đệm khi màn hình hiển thị không có gì khác.Nhưng tôi đã nghĩ ra một cách sử dụng thủ thuật CSS. Tôi sẽ kể cho bạn nghe nhiều hơn về anh ấy.
Vị trí trong một khối vô hình thông qua Độ mờ CSS và vị trí (định vị) CSS có thuộc tính như vậy - độ mờ. Mục đích của nó là thay đổi độ trong suốt và bạn có thể thay đổi độ trong suốt xuống 0. Ngoài ra CSS còn có thuộc tính vị trí, cần thiết để định vị phần tử trên trang ( bạn có thể di chuyển khối thông tin theo từng pixel đến bất kỳ đâu trong và ngoài khả năng hiển thị của trang). Tất cả điều này sẽ hữu ích cho chúng tôi:Do đó, chúng ta có được một khối vô hình có hình ảnh, khối này thực tế cũng nằm bên ngoài người dùng có thể nhìn thấy thông tin. Nhân tiện, kiểu định vị bên ngoài màn hình này thường được sử dụng nếu họ muốn tạo một loại khối vô hình nào đó; tôi thường thấy cách liên kết đến mẫu miễn phí chính xác theo cách này. Vậy là bạn biết hết rồi =))
Nếu bạn muốn tải trước một số hình ảnh theo cách này thì chỉ cần chỉ ra chúng bên trong khối div, như thế này:
Đây là những phương pháp tải trước hình ảnh có thể được sử dụng trong quá trình phát triển trang web. Nếu bạn có bất kỳ ý tưởng nào khác, tôi sẽ vui lòng đọc chúng trong phần bình luận.
Chúc mọi người may mắn trong việc bố cục và tạo hoạt ảnh! =)
Tại sao bạn lại cần hình ảnh? Hãy tưởng tượng rằng bạn có một thành phần trên một trang web và bạn muốn hình nền của nó hiển thị hoặc thay đổi khi bạn di chuột qua nó. Về nguyên tắc, các vấn đề sẽ không phát sinh; mọi thứ có thể được giải quyết một cách đơn giản: khi tạo một trang web theo kiểu đánh dấu cho pseudo-class:hover của phần tử mong muốn, chúng tôi chỉ định đường dẫn đến hình ảnh được yêu cầu trong thuộc tính nền.
Nhưng có một lưu ý: nếu sự kiện di chuột xảy ra lần đầu tiên thì có thể mất thời gian để tải hình ảnh. Mặc dù khoảng thời gian này có thể nhỏ nhưng đôi khi bạn có thể nhận thấy độ trễ ngắn và khó chịu giữa việc di chuột qua một phần tử và hình ảnh được hiển thị đầy đủ. Rõ ràng là trong tương lai sẽ không có sự chậm trễ như vậy vì các trình duyệt sẽ lưu trữ hình ảnh một cách thiện chí. Tuy nhiên, như bạn đã biết, ấn tượng đầu tiên về trang web của bạn chỉ nên tích cực và không cần thiết phải làm hỏng nó bằng những chuyện vặt vãnh như vậy, đặc biệt là vì chúng có thể tránh được. Làm thế nào để giải quyết một vấn đề nhỏ nhưng độc đáo như vậy? Có nhiều phương pháp, ở đây studio web của chúng tôi sẽ chỉ giới thiệu cho bạn những phương pháp có thể giải quyết bằng css.
Kỹ thuật đầu tiên là tải ngay thành phần đồ họa, sau đó xóa nó khỏi vùng hiển thị bằng cách sử dụng thuộc tính vị trí nền, ví dụ: bằng cách đặt độ lệch x và y sau - -9999px -9999px. Khi sự kiện di chuột xảy ra, chúng tôi đã áp dụng giá trị thực, ví dụ: phía dưới bên trái.
Phải làm gì nếu phần tử đã có hình nền, và khi bạn di con trỏ chuột thì nó phải được thay đổi. Kỹ thuật trên không còn phù hợp như một giải pháp. Thông thường, trong những trường hợp như vậy, các họa tiết (hình nền kết hợp) được sử dụng khi vị trí của nền bị dịch chuyển. Nếu phương pháp này không có sẵn cho bạn, hãy thử cách sau. Áp dụng hình ảnh cho một thành phần khác tồn tại trên trang nhưng không có hình nền.
#phần tử ngẫu nhiên không nghi ngờ ( nền: url(images/grass.png) no-repeat -9999px -9999px; )
#grass:hover ( nền: url(images/grass.png) no-repeat; )
Ý tưởng là tạo ra các phần tử mới chỉ cần thiết để tải trước hình ảnh. Bạn sẽ nói rằng đây không phải là điều tốt nhất Cách tốt nhất, bởi vì số lượng hình nộm như vậy có thể rất lớn, nhưng giải pháp sẽ không được tinh tế. Và bạn sẽ hoàn toàn đúng. Chúng tôi không cần yếu tố bổ sung, vì chúng ta có thể yên tâm sử dụng những cái hiện có. Tất cả những gì chúng ta cần là sử dụng các lớp giả:after hoặc:Before.
#thứ gì đó:trước (
nội dung: url("./img.jpg");
khả năng hiển thị:ẩn;
Tùy chọn này cho chúng ta cơ hội tải trước hình ảnh mà không cần tạo thêm các phần tử.
Tất nhiên, bạn có thể sử dụng javascript cho những mục đích này, nhưng nếu các giải pháp trên đủ để bạn tạo một trang web thì tại sao không sử dụng chúng.
Để có thể tải một hoặc nhiều tệp lên máy chủ, một trường đặc biệt sẽ được sử dụng trong biểu mẫu. TRONG Trình duyệt Firefox, IE và Opera, phần tử như vậy được hiển thị dưới dạng trường văn bản, bên cạnh đó có một nút có nhãn “Duyệt…” (Hình 1). Trong Safari và Chrome, chỉ có nút “Chọn tệp” (Hình 2).
Cơm. 1. Xem trường tải tệp lên trong Firefox
Khi bạn nhấp vào nút, một cửa sổ chọn tệp sẽ mở ra, nơi bạn có thể chỉ định tệp nào người dùng muốn sử dụng.
Cú pháp cho trường tải tệp lên như sau.
Các thuộc tính được liệt kê trong bảng. 1.
Trước khi sử dụng trường này, bạn phải thực hiện các thao tác sau trên biểu mẫu:
Hình thức tải lên tệp được thể hiện trong ví dụ 1.
Ví dụ 1: Tạo trường để gửi file
HTML5 IE Cr Op Sa Fx
Gửi một tập tin đến máy chủ
Mặc dù bạn có thể đặt chiều rộng của trường bằng thuộc tính size, nhưng chiều rộng thực sự không ảnh hưởng đến kết quả đầu ra của biểu mẫu. TRONG Trình duyệt Safari và trong Chrome thuộc tính này không có tác dụng gì cả.
Thuộc tính multiple quan trọng hơn; nó cho phép bạn không bị giới hạn ở một tệp để lựa chọn mà có thể chỉ định một vài tệp trong số chúng cùng một lúc để tải đồng thời.
Nếu thuộc tính chấp nhận không được chỉ định thì các tệp thuộc bất kỳ loại nào sẽ được thêm và tải. Sự hiện diện của chấp nhận cho phép bạn giới hạn việc lựa chọn tệp, điều này đặc biệt quan trọng khi bạn chỉ cần tải lên hình ảnh hoặc video. Giá trị là , một số giá trị được phân tách bằng dấu phẩy. Bạn cũng có thể sử dụng các từ khóa sau:
- âm thanh/* - lựa chọn tập tin âm nhạc bất kỳ loại nào;
- hình ảnh/* - tập tin đồ họa;
- video/* - tập tin video.
Trong bảng Hình 2 hiển thị một số giá trị hợp lệ cho thuộc tính chấp nhận.
Việc sử dụng các thuộc tính bổ sung được thể hiện trong ví dụ 2.
HTML5 IE 10+ Cr Op Sa Fx
Tải ảnh của bạn lên máy chủ
Không phải tất cả các trình duyệt đều hỗ trợ các thuộc tính mới. IE hoàn toàn bỏ qua nhiều và chấp nhận, Safari không hỗ trợ chấp nhận và Firefox không hoạt động với loại MIME, chỉ với từ khóa. Do đó, trong ví dụ trên, giá trị được đặt riêng cho Firefox thành image/*,image/jpeg . Cũng lưu ý một lỗi lạ trong Opera không cho phép khoảng trắng sau dấu phẩy bên trong.
Kết quả của ví dụ được hiển thị trong Hình. 3. Xin lưu ý rằng do có nhiều trường nên giao diện của trường sẽ thay đổi một chút.
- Dịch
- Hướng dẫn
Tải hình ảnh nhanh và mượt mà là một trong những thành phần quan trọng của giao diện web tốt. Ngoài ra, ngày càng có nhiều trang web sử dụng ảnh lớn trong thiết kế, đối với những dự án như vậy, điều đặc biệt quan trọng là phải giám sát việc tải đồ họa chính xác. Bài viết này mô tả một số kỹ thuật sẽ giúp bạn kiểm soát việc tải hình ảnh.
Sử dụng vùng chứa cho mỗi hình ảnh Một phương pháp đơn giản có thể áp dụng cho bất kỳ hình ảnh nào trên trang web. Bí quyết là mỗi hình ảnh được gói trong một DIV, điều này ngăn cản việc tải từng hàng:
Sử dụng vùng chứa, bạn có thể kiểm soát tỷ lệ khung hình của hình ảnh và cũng có thể sử dụng chỉ báo tải, điều này rất thuận tiện nếu hình ảnh nặng.
Ví dụ: để đặt tỷ lệ khung hình thành 4:3, bạn có thể sử dụng CSS sau:
Img_wrapper(vị trí: tương đối; đệm-top: 75%; tràn: ẩn; ) .img_wrapper img(vị trí: tuyệt đối; top: 0; chiều rộng: 100%; độ mờ: 0; )
Để đảm bảo hình ảnh chỉ được hiển thị trên trình duyệt sau khi đã được tải đầy đủ, bạn cần thêm sự kiện onload cho hình ảnh và sử dụng JavaScript để xử lý sự kiện:
hàm imgLoaded(img)( var $img = $(img); $img.parent().addClass("loaded"); );
Mã chức năng bên trong thẻ ĐẦU phải được đặt ở cuối cùng, sau bất kỳ jQuery hoặc plugin nào khác. Sau khi hình ảnh được tải đầy đủ, nó phải được hiển thị trên trang:
Img_wrapper.loaded img( độ mờ: 1; )
Để có hiệu ứng làm cho hình ảnh trông mượt mà, bạn có thể sử dụng chuyển tiếp CSS3:
Img_wrapper img(vị trí: tuyệt đối; top: 0; chiều rộng: 100%; độ mờ: 0; -webkit-transition: độ mờ 150ms; -moz-transition: độ mờ 150ms; -ms-transition: độ mờ 150ms; chuyển tiếp: độ mờ 150ms; )
Một ví dụ trực tiếp về phương pháp này có sẵn.
Chúng tôi sử dụng hàm slideLoaded() để kiểm soát quá trình:
Hàm slideLoaded(img)( var $img = $(img), $slideWrapper = $img.parent(), Total = $slideWrapper.find("img").length, phần trămLoaded = null; $img.addClass("loaded "); var đã tải = $slideWrapper.find(".loaded").length; if(loaded == tổng)( phần trămLoaded = 100; // PLUGIN TỨC THÌ $slideWrapper.easyFader(); ) else ( // THEO DÕI TIẾN ĐỘ phần trăm đã tải = đã tải/tổng * 100; ); );
Hình ảnh đã tải được chỉ định lớp đã tải và tiến trình tổng thể được hiển thị. Một lần nữa, JavaScript phải được đặt ở cuối thẻ HEAD, sau mọi thứ khác.
var heroArray = [ "/uploads/hero_about.jpg", "/uploads/hero_history.jpg", "/uploads/hero_contact.jpg", "/uploads/hero_services.jpg" ]
Khi khách truy cập vào trang web, sau khi tải trang chủ, hình ảnh bắt đầu được tải vào bộ đệm. Để đảm bảo bộ nhớ đệm không can thiệp vào việc hiển thị nội dung hiện tại, bạn cần thêm chức năng JavaScript vào sự kiện tải cửa sổ:
Hàm preCacheHeros())( $.each(heroArray, function())( var img = new Image(); img.src = this; )); ); $(window).load(function())( preCacheHeros(); ));
Phương pháp này cải thiện khả năng sử dụng của trang web nhưng lại gây thêm tải cho máy chủ. Điều này phải được ghi nhớ khi thực hiện chức năng đó. Ngoài ra, cần phải tính đến những cách có thể khách truy cập vào trang web và lưu vào bộ nhớ đệm các hình ảnh trên các trang mà người dùng có nhiều khả năng truy cập nhất. Để hiểu những đường dẫn như vậy qua trang web, cần phải phân tích số liệu thống kê lưu lượng truy cập.
Điều đáng chú ý là URL hình ảnh được chỉ định trong data-src chứ không phải src. Điều này là cần thiết để trình duyệt không tải hình ảnh xuống ngay lập tức. Thay vào đó, src được tải bằng pixel GIF trong suốt base64, giúp giảm số lượng chuyến đi khứ hồi tới máy chủ.
Tất cả những gì còn lại là thay đổi giá trị src thành data-src khi sự kiện mong muốn xảy ra. JavaScript cho phép bạn tải hình ảnh tăng dần:
Hàm lườiLoad())( var $images = $(".lazy_load"); $images.each(function())( var $img = $(this), src = $img.attr("data-src") ;$ img .on("load",imgLoaded($img)) .attr("src",src); )); ); $(window).load(function())( lườiLoad(); );
Kết luận Không có một cách tốt nhấtđể quản lý việc tải hình ảnh trên trang web. Trong mỗi trường hợp cụ thể cần lựa chọn phương pháp thích hợp, đồng thời kết hợp nhiều phương pháp nếu phù hợp. Một trong những điểm chính mà bạn cần chú ý đến là hiệu suất và lưu lượng truy cập. Nói một cách đơn giản, trước hết bạn nên nghĩ xem nó sẽ như thế nào thuận tiện hơn cho người dùngđịa điểm.
