Hiển thị trang sau khi được nạp đầy đủ với Turbolinks

Tôi đang sử dụng Turbolinks và tôi có hoạt ảnh tải xảy ra giữa các trang. Hiện tại tôi đang sử dụng trang: tải để hoàn thành hoạt ảnh, có vẻ như trang: tải đang hoạt động như tài liệu sẵn sàng hơn là tải window.on.Hiển thị trang sau khi được nạp đầy đủ với Turbolinks

Hiệu ứng mong muốn là tôi có lớp phủ được hiển thị trên nội dung trong khi trang đang tải với hoạt ảnh đang tải trên đầu trang. Khi trang được tải hoàn toàn (với hình ảnh, đối tượng, v.v ...), nó sẽ mờ dần lớp phủ để hiển thị nội dung.

Điều đang xảy ra là nội dung đang được hiển thị trước khi trang được tải hoàn toàn. Đây là javascript tôi đang sử dụng.

(function() { 

     function showPreloader() { 
     Turbolinks.enableProgressBar(); 
     $('#status').fadeIn('slow'); 
     $('#preloader').delay(300).fadeIn('slow'); 
     } 

     function hidePreloader() { 
     $('#status').fadeOut(); 
     $('#preloader').delay(300).fadeOut('slow'); 
     } 

     $(document).on('page:fetch', showPreloader); 
     $(document).on('page:load', hidePreloader); 
     $(window).on('load', hidePreloader); 
    })()

Nguồn

2015-03-11 user3167213

Giải pháp này dành cho turbolinks 5, nhưng phải dễ điều chỉnh.

Tải sẽ xuất hiện ngay lập tức vì bộ đệm turbolinks, nó sẽ hiển thị trang trước khi thực hiện cuộc gọi ajax, phá vỡ hoạt ảnh.

Để có được một hiệu ứng tải làm việc chúng ta phải vô hiệu hóa nó:

<head> 
.... 
    <meta name="turbolinks-cache-control" content="no-cache">

Sau đó, chúng ta có thể làm như sau: (sử dụng animated.css)

$(document).on('turbolinks:click', function(){ 
    $('.page-content') 
    .addClass('animated fadeOut') 
    .off('webkitAnimationEnd oanimationend msAnimationEnd animationend') 
}); 


$(document).on('turbolinks:load', function(event){ 
    // if call was fired by turbolinks 
    if (event.originalEvent.data.timing.visitStart) { 
     $('.page-content') 
     .addClass('animated fadeIn') 
     .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ 
      $('.page-content').removeClass('animated'); 
     }); 
    }else{ 
     $('.page-content').removeClass('hide') 
    } 
...

Cùng với đó, quá trình chuyển đổi là đẹp và mượt mà

Nguồn

2017-09-20 23:18:53

bạn có bất kỳ nguồn nào cho cách giải quyết của mình không? –

ý của bạn là gì? nếu là một ví dụ làm việc nop, nếu là tác giả, đó là tôi. –

Không có hộp này.

Chiến lược của tôi cho giải pháp là sử dụng thư viện như imagesLoaded.

Trên page:load bạn sẽ thiết lập một hình ảnh hình ảnhĐược tải mà bạn kích hoạt hoạt ảnh kết thúc. Bằng cách này bạn có thể trì hoãn nó cho đến khi tất cả hình ảnh mới được nạp ...

Mã này sẽ giống như thế này:

$(document).on('page:load', function() { 
    $('body').imagesLoaded(hidePreloader); 
});

Nguồn

2017-09-21 09:51:00 severin

Hãy thử điều này:

HTML:

<!--top--> 
<div style="background-color: 
/*background color*/ 
white 
;width:100vw;height:100vh;z-index:999999;position:fixed;top:0;left:0;right:0;bottom:0;background:url(
/*or URL*/ 
background.jpg 
) center center no-repeat;background-size:cover;" id="pgLoader"> 
<!--document.querySelector("#pgloader loader") 
where loader goes--> 
<loader style="position:fixed;top: 
/*may need to change*/ 
40% 
;left:0;right:0;bottom:0;width:100%;height:100%;text-align:center;"> 
Loading... 
</loader> 
</div> 
<!--rest of page--> 
<h1>hello!</h1> 
Blablabla 
<img src="http://lorempixel.com/200/200/abstract/">

JS:

window.onload=function(){ 
document.querySelector("#pgloader").style.display="none"; 
//maybe other stuff too 
}

Demo

(Nhấn lại nút đầu ra để làm mới bản trình diễn)

Nguồn

2017-09-22 19:26:57

Hiển thị trang sau khi được nạp đầy đủ với Turbolinks

Trả lời

Các vấn đề liên quan