时间戳

首页 > 解决方案 > JavaScript 先加载特定图像 (gif)

javascript - JavaScript 先加载特定图像 (gif)

问题描述

我的网站有一个加载屏幕，我希望加载 gif 动画始终是加载的第一个图像。目前这是加载的最后一件事。我已经离开了 HTML 和 JavaScript。我想使用 JavaScript 加载 gif 的原因是，当加载屏幕出现时，gif 从动画开始播放。我也不确定窗口事件侦听器是否需要在 document.ready 函数中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="assets/style.css">
    <link rel="stylesheet" href="assets/responsive.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="assets/javascript/main.js"></script>
    <script type="text/javascript" src="assets/javascript/home.js"></script>

</head>
<body class="no-scroll">

    <div class="loader">
        <img src="">
    </div>

window.addEventListener("load", function () {
    $(".loader").find('img').attr("src", "assets/icons/loading.gif");
    const loader = document.querySelector(".loader");
    setTimeout(function(){
        loader.className += " hidden";
        $('body').removeClass('no-scroll');
    },2000);
});

$(document).ready(function(){

标签： javascripthtmljqueryloadingonload

解决方案

推荐阅读