Tôi đã tạo một trang web đơn giản với hình ảnh nhưng khi người dùng truy cập vào trang đó, trình duyệt sẽ tải từng ảnh một. Vì vậy, người dùng nhìn thấy đầu tiên hình ảnh đầu tiên, sau đó hình ảnh thứ hai và như vậy.Làm cách nào để tải trước trang web trước khi hiển thị?

Tôi muốn thay vào đó đầu tiên xuất hiện gif tải ở giữa trang web và sau đó, khi tất cả hình ảnh được tải xuống, hãy hiển thị toàn bộ trang web cho người dùng.

Tôi làm cách nào để thực hiện việc này?

2010-12-31 xRobot

Bạn có thể hiển thị hình ảnh trình tải bằng cách đặt nó ở đâu đó im <img> thẻ và sử dụng dưới mã js để giấu nó sau này khi tất cả các hình ảnh được hiển thị:

window.onload = function(){ 
    var el = document.getElementById('elementID'); 
    el.style.display = 'none'; 
};

đâu elementID được coi là id của bộ nạp phần tử/thẻ.

Các load cháy sự kiện khi tất cả hình ảnh/khung hình/nguồn lực bên ngoài được nạp, như vậy theo thời gian mà cháy sự kiện, tất cả các hình ảnh được nạp và do đó chúng ẩn tải thông điệp/hình ảnh ở đây.

Nguồn

2010-12-31 17:33:40 Sarfraz

Bạn có thể làm điều này với JQuery. Giả sử trang web của bạn trông như thế này:

<body> 
    <div id='loader'>Loader graphic here</div> 
    <div id='pagecontent' style='display:none'>Rest of page content here</div> 
</body>

Bạn có thể có một chức năng JQuery để hiển thị pagecontent khi toàn bộ trang được nạp:

$(document).ready(function() { 
    $(window).load(function() { 
     $('#loader').hide(); 
     $('#pagecontent').show(); 
    }); 
});

Nguồn

2010-12-31 17:41:34 Keltex

Trong trường hợp này nếu người dùng chưa kích hoạt javascript thì anh ta không thấy div #pagecontent. Đúng ? – xRobot

Không phải là '$ (tài liệu) .ready (function()' khá dư thừa? '$ (Cửa sổ) .load' sẽ kích hoạt ngay cả khi nó ở bên ngoài khối. –

Bạn nói đúng, xử lý' ready' có thể – Keltex

Edit: Tôi hoãn để Keltex's answer. Đó là một giải pháp tốt hơn nhiều. Tôi sẽ để lại cho tôi ở đây cho hậu thế (trừ khi tôi nên xóa nội dung và câu trả lời của tôi hoàn toàn? Tôi mới ở đây).

Một giải pháp khác, được sử dụng khá thường xuyên trong quá khứ, là tạo trang đích tải trước tất cả hình ảnh của bạn. Khi tải trước được thực hiện, nó sẽ chuyển hướng đến trang web thực tế. Để cho tiện làm việc, bạn sẽ cần phải nhận được URL cho tất cả các hình ảnh mà bạn muốn tải, và sau đó làm một cái gì đó như thế này:

# on index.html, our preloader 
<script type='text/javascript'> 
    // add all of your image paths to this array 
    var images = [ 
     '/images/image1.png', 
     '/images/image2.png', 
     '/images/image3.png' 
    ]; 

    for(var i in images) { 
     var img = images[i]; 
     var e = document.createElement('img'); 
     // this will trigger your browser loading the image (and caching it) 
     e.src = img; 
    } 

    // once we get here, we are pretty much done, so redirect to the actual page 
    window.location = '/home.html'; 
</script> 
<body> 
    <h1>Loading....</h1> 
    <img src="loading.gif"/> 
</body>

Nguồn

2010-12-31 17:42:12

aaahhh ... the vẻ đẹp của trường học cũ ... + 1 !! :) – NoobEditor

HTML

<div id="preloader"> 
    <div id="loading-animation">&nbsp;</div> 
</div>

JAVASCRIPT

<script type="text/javascript"> 
    /* ======== Preloader ======== */ 
    $(window).load(function() { 
     var preloaderDelay = 350, 
       preloaderFadeOutTime = 800; 

     function hidePreloader() { 
      var loadingAnimation = $('#loading-animation'), 
        preloader = $('#preloader'); 
      loadingAnimation.fadeOut(); 
      preloader.delay(preloaderDelay).fadeOut(preloaderFadeOutTime); 
     } 

     hidePreloader(); 
    }); 
</script>

CSS

#preloader { 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 9999; 
    position: fixed; 
    background-color: #fff; 
} 

#loading-animation { 
     top: 50%; 
     left: 50%; 
     width: 200px; 
     height: 200px; 
     position: absolute; 
     margin: -100px 0 0 -100px; 
     background: url('loading-animation.gif') center center no-repeat; 
}

Nguồn

2013-11-04 03:32:54 Syed

Cr ăn một div với trình nạp trước tên lớp và đặt trình nạp bên trong div đó.

phong cách preloader lớp giống như dưới đây

.preloader { 
     position: fixed; 
     top: 0px; 
     left: 0px; 
     width: 100%; 
     height: 100%; 
     background-color: white; 
     /* background-color is would hide the data before loading 
     text-align: center; 
    }

Html

<div class="preloader"> 
    Any loader image 
    </div>

Jquery

 $(window).load(function(){ 
     $('.preloader').fadeOut(); // set duration in brackets 
    });

Một bộ nạp trang đơn giản là sẵn sàng ....

Nguồn

2015-04-17 10:33:27 Dark

Làm cách nào để tải trước trang web trước khi hiển thị?

Trả lời

HTML

JAVASCRIPT

CSS

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