HTML5 swipe.js css3 chuyển tiếp; hiển thị offscreen và lưu vào bộ nhớ cache của các phần tử trang

Question

Tôi đang tạo một tạp chí HTML5 cho máy tính bảng và máy tính để bàn có sử dụng swipe.js (http://swipejs.com).

Mọi thứ có vẻ hoạt động tốt, Trong một trang HTML tôi đã đặt bên cạnh từng phần tử danh sách toàn màn hình khác. Toàn bộ tạp chí được tích hợp trong một tệp html tĩnh. Tôi có thể trượt qua các trang bằng cách vuốt trên máy tính bảng và bằng cách sử dụng các nút cho phiên bản dành cho máy tính để bàn (xem ví dụ trên trang chủ swipe.js, nhưng sau đó với các trang trình bày toàn màn hình).

Các trang được đặt cạnh nhau và có kích thước của màn hình.

[ |0||1||2| .. |i-1||i||i+1| .. |n| ] 

Chuyển đổi swipe.js được thực hiện với sự trợ giúp của css3, sử dụng hàm css translate3d(). Trong trường hợp này, hiển thị phần cứng được sử dụng.

Trên máy tính để bàn (Chrome, Safari, FF), iPad1 và (thậm chí tốt hơn) iPad2 này có hiệu ứng mong muốn mà tôi đang tìm kiếm; chuyển tiếp trơn tru. Hoàn hảo! Tuy nhiên, trên iPad3, các trang dường như hiển thị 'chậm' khi được nhập (bằng cách chuyển đổi) lần đầu tiên. Ngay cả khi không thiết lập hình ảnh nền (chỉ là màu), 'hiển thị' của trang được chuyển đổi được coi là một chút 'chậm'; trang được tạo bởi các khối 'nhấp nháy'.

Assumption: giả định của tôi là (sau khi đọc vào chủ đề này), mà điều này là do trình duyệt duy nhất làm cho các yếu tố có trong màn hình, và sẽ cache các trang swiped chỉ trong một thời gian, làm sạch bộ nhớ cache sau đó để kiểm soát quản lý bộ nhớ.

Câu hỏi của tôi: Có cách nào để kiểm soát rendering offscreen và bộ nhớ đệm, vì vậy mà tôi có thể buộc (pre) làm cho các yếu tố trang i-1, i + 1 (và tuôn bộ nhớ cache cho tất cả các thành phần của trang khác) , để tăng tốc độ hiển thị chuyển tiếp của tôi?

Lưu ý: Trong một số chủ đề về StackOverflow, 'nhấp nháy' của quá trình chuyển đổi css3 được đề cập. Tôi đã triển khai các thủ thuật CSS được đề xuất nhưng sẽ không giải quyết được trường hợp của tôi.

-webkit-backface-visibility: hidden; 
-webkit-transform:translate3d(0,0,0); 

Answer 1

Cuối cùng giải pháp là một hack của Swipejs trong đó tôi đã thêm một phương pháp 'hideOthers()', thiết lập sự hiện diện phong cách để 'ẩn', mà unloads các trang từ bộ nhớ phần cứng:

hideOthers: function(index) { 
    var i = 0; 
    var el; 

    for(i in this.slides) { 
     el = this.slides[i]; 
     if (el.tagName == 'LI') { 
      // Show pages i-1, i and i+1 
      if (parseInt(i) == index 
      || (parseInt(i) + 1) == index 
      || (parseInt(i) - 1) == index 
     ) { 
       el.style.visibility = 'visible'; 
      } 
      else { 
       el.style.visibility = 'hidden'; 
      } 
     } 
    } 
} 

..và thêm cò bên dưới dòng như cuối cùng trong 'trượt()' phương pháp

// unload list elements from memory 
var self = this; 
setTimeout(function() { self.hideOthers(index); }, 100); 

Chỉ translate3d là cần thiết để chuyển tăng tốc phần cứng trên (như đã đề cập trong câu hỏi của tôi ở trên):

-webkit-transform:translate3d(0,0,0); 

Bạn có thể tìm thấy kết quả (bao gồm iScroll để cuộn dọc) here.

Answer 2

liên quan đến các webkit đạo cụ backface/translate3d sử dụng để kích hoạt tăng tốc phần cứng, tôi đã đọc rằng trong iOS 6+ những không có tác dụng hoàn toàn giống như trong các phiên bản trước đó, và (quan trọng hơn) tăng tốc phần cứng cần được áp dụng không chỉ trên phần tử đang được làm động, mà còn trên bất kỳ phần tử nào chồng chéo/chồng chéo lên phần tử đó.

tài liệu tham khảo (không nhiều): http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

Để công bằng này là khá giai thoại, tôi đã bản thân mình không thể khắc phục vấn đề nhấp nháy của riêng tôi - do thời hạn chặt chẽ - nhưng điều này có thể là một điểm đi đúng hướng.