Trình tải trang trong trang html

Tôi đang cố gắng hiển thị hình ảnh GIF của trình tải trong phần div của trang html này. Nhưng tôi không thể làm cho nó hoạt động được. Nội dung div bị ẩn và hình ảnh GIF biến mất.Trình tải trang trong trang html

CSS:

.loader { 
    background-image: url(image/Preloader_8.gif); 
    background-repeat: no-repeat; 
    height:100px; 
    width:200px; 
}

JavaScript:

<script type="text/javascript"> 
    $(window).load(function() { 
     $(".loader").fadeOut("slow"); 
    }) 
</script>

Html:

<body> 
    <div class="loader"> 
     Loading Image 
    </div> 
</body>

Nguồn

2015-10-23 user3580570

Không có gì sai với mã. Bạn có chắc chắn, bạn đã thêm tham chiếu đến thư viện jQuery? – Satpal

Bạn đã yêu cầu fadeOut lớp trình tải. Vì vậy, nó biến mất khi tải. Những gì bạn đang cố gắng để thực hiện? – Thamilan

Tôi đang sử dụng mã ở trên – user3580570

Thêm mã này:

$(document).ready(function(){ 
    $(".loader").fadeOut("slow"); 
})

jsfiddle

Nguồn

2015-10-23 06:36:53

Trong mã của bạn, lớp bộ nạp được gán cho phần div, vì vậy khi bạn kích hoạt mờ dần khỏi trang bộ nạp, toàn bộ div được gán cho lớp mờ dần. Vì vậy, tốt hơn có div nội bộ mà bộ nạp được gán. Điều này có thể giúp kiểm tra

<body> 
 
    <div class="Image"> 
 
    <div class="loader"> 
 
     Loading Image 
 
    </div> 
 
    </div> 
 
</body>

Working example here

Nguồn

2015-10-23 06:45:09 rakesh

Không hoạt động tốt ... – user3580570

bạn có thể chia sẻ mã không? nếu bạn thấy tải gif và sau đó div có chứa là biến mất có nghĩa là, sử dụng hai divs như đã đề cập trước đây. nếu nội dung tải của bạn thông qua ajax thêm fadeout trong succes handler – rakesh

Cảm ơn bạn đã bình luận. Tôi đang sử dụng nội dung ajax trong div. sẽ lấy từ cơ sở dữ liệu. .. – user3580570

HTML

<body> 
     <div class="loader" style="display:none"> 
      Loading Image 
     </div> 
    </body>

$(window).load(function() { 
    $(".loader").fadeOut("slow"); 
})

hãy thêm đoạn mã sau vào phía trên cùng của trang web của bạn

$(".loader").fadeIn();

Thêm bốc div trên ngay trên kịch bản

Nguồn

2015-10-23 06:57:19

Tôi nghĩ lý do tại sao mã của bạn:

$(window).load(function() { 
     $(".loader").fadeOut("slow"); 
    })

không hoạt động vì tập lệnh được thực thi sau khi tài liệu được tải đầy đủ.

Mã sau hoạt động.

if (document.readyState == 'complete') { 
    $(".loader").fadeOut("slow"); 
} else { 
    $(window).load(function() { 
     $(".loader").fadeOut("slow"); 
    }) 
}

jsfiddle

Nguồn

2015-10-23 06:57:24 kaze13

Bạn đang sử dụng AJAX để lấy nội dung trong chức năng div hoặc đơn giản là .load?

Trong trường hợp của .load() sự kiện jQuery,

$(".loader").load("test.html", function() { 
    $(".loader").fadeOut("slow"); 
});

Trong trường hợp yêu cầu AJAX, gọi hàm loader trong trường hợp thành công của AJAX gọi.

function loader() { 
    $(".loader").fadeOut("slow"); 
});

Nguồn

2015-10-23 07:14:02 Thamilan

Cách đơn giản nhất để hiển thị trình tải.gif trên trang web như:

<div id="divloader" class="ShowLoader"> 
    <img id="imgUpdateProgress" class="loaderIMG" src="../../images/newloader.gif" alt="Loading ..." title="Loading ..." /> 
</div>

mã CSS đang

<style> 

.loaderIMG { 
    padding: 10px; 
    position: fixed; 
    top: 45%; 
    left: 45%; 
    width: 80px; 
} 

.HideLoader { 
    display: none; 
} 
</style>

jQuery:

$(document).ready(function() { 
      $("#divloader").addClass("HideLoader"); 
     });

séc đầu tiên mà thư viện jQuery của bạn làm việc hay không bằng cách hiển thị msg tỉnh táo, và sau đó kiểm tra xem đường dẫn hình ảnh từ phần tử kiểm tra trình duyệt.

Nguồn

2015-10-23 07:46:00

Trình tải trang trong trang html

Trả lời

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