Nodejs 焦点图打开后，显示空白，大概2秒左右，恢复正常

Nodejs 焦点图打开后，显示空白，大概2秒左右，恢复正常

情况如题，下面请看JS，后面会跟HTML以及CSS，同时调用了jquery库

// JS开始 <script type=“text/javascript”> $(function() { var sWidth = $(".flash").width(); //获取焦点图的宽度（显示面积） var len = $(".flash ul li").length; //获取焦点图个数 var index = 0; var picTimer;

//以下代码添加数字按钮和按钮后的半透明长条
var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0; i < len; i++) {
	btn += "<span>" + (i+1) + "</span>";
}
btn += "</div>"
$(".flash").append(btn);
$(".flash .btnBg").css("opacity",0.5);

//为数字按钮添加鼠标滑入事件，以显示相应的内容
$(".flash .btn span").mouseenter(function() {
index = $("#flash .btn span").index(this);
showPics(index);
}).eq(0).trigger(“mouseenter”);


//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$(".flash ul").css(“width”,sWidth * (len + 1));


//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$(".flash").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
if(index == len) { //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零
showFirPic();
index = 0;
} else { //如果索引值不等于li元素个数，按普通状态切换，调用showPics()
showPics(index);
}
index++;
},3000); //此3000代表自动播放的间隔，单位：毫秒
}).trigger(“mouseleave”);


//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
$(".flash ul").stop(true,false).animate({“left”:nowLeft},500); //通过animate()调整ul元素滚动到计算出的position
$(".flash .btn span").removeClass(“on”).eq(index).addClass(“on”); //为当前的按钮切换到选中的效果
}


function showFirPic() { //最后一张图自动切换到第一张图时专用
$(".flash ul").append($(".flash ul li:first").clone());
var nowLeft = -len*sWidth; //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
$(".flash ul").stop(true,false).animate({“left”:nowLeft},500,function() {
//通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
$(".flash ul").css(“left”,“0”);
$(".flash ul li:last").remove();
});
$(".flash .btn span").removeClass(“on”).eq(0).addClass(“on”); //为第一个按钮添加选中的效果
}

});

</script>

// //<div class=“wrapper”> // <div class=“flash”> // <ul> // <li> <a href="#" target="_blank"><img src=“p01.jpg” alt="" /></a></li> // <li><a href="#" target="_blank"><img src=“p02.jpg” alt="" /></a></li> // <li><a href="#" target="_blank"><img src=“p03.jpg” alt="" /></a></li> // <li><a href="#" target="_blank"><img src=“p04.jpg” alt="" /></a></li> // </ul> // </div> //</div>

<style type=“text/css”>

  • {margin:0; padding:0;} body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;} .clearfix:after {content: “.”; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {zoom:1;} ul,li {list-style:none;} img {border:0;}

.wrapper {width:600px; margin:0 auto; padding-bottom:50px;}

.wrapper {width:780px;} /* tmall flash */ .flash {width:300px; height:200px; overflow:hidden; position:relative;} .flash ul {height:200px; position:absolute;} .flash ul li {float:left; width:300px; height:200px; overflow:hidden; position:relative; background:#000;} .flash ul li div {position:absolute; overflow:hidden;} .flash .btnBg {position:absolute; width:300px; height:20px; left:0; bottom:0; background:#000;} .flash .btn {position:absolute; width:290px; height:20px; left:0; bottom:0; padding-left:10px;} .flash .btn span {display:inline-block; _display:inline; _zoom:1; width:18px; height:18px; line-height:18px; text-align:center; font-size:14px; font-family:“Microsoft YaHei”,SimHei; margin-right:10px; cursor:pointer; color:#fff;} .flash .btn span.on {background:#000; color:#fcc;} </style>


3 回复

Nodejs 焦点图打开后，显示空白，大概2秒左右，恢复正常

问题描述

在使用 jQuery 编写的焦点图插件中，当页面加载时，焦点图会短暂显示为空白，大约2秒左右后恢复正常。这可能是由于加载顺序或资源加载延迟导致的。

解决方案

可以通过确保 DOM 元素完全加载后再执行 JavaScript 代码来解决这个问题。以下是修改后的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点图示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
    <div class="flash">
        <ul>
            <li><a href="#" target="_blank"><img src="p01.jpg" alt="" /></a></li>
            <li><a href="#" target="_blank"><img src="p02.jpg" alt="" /></a></li>
            <li><a href="#" target="_blank"><img src="p03.jpg" alt="" /></a></li>
            <li><a href="#" target="_blank"><img src="p04.jpg" alt="" /></a></li>
        </ul>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        var sWidth = $(".flash").width(); // 获取焦点图的宽度（显示面积）
        var len = $(".flash ul li").length; // 获取焦点图个数
        var index = 0;
        var picTimer;

        // 以下代码添加数字按钮和按钮后的半透明长条
        var btn = "<div class='btnBg'></div><div class='btn'>";
        for (var i = 0; i < len; i++) {
            btn += "<span>" + (i + 1) + "</span>";
        }
        btn += "</div>";
        $(".flash").append(btn);
        $(".flash .btnBg").css("opacity", 0.5);

        // 为数字按钮添加鼠标滑入事件，以显示相应的内容
        $(".flash .btn span").mouseenter(function() {
            index = $(".flash .btn span").index(this);
            showPics(index);
        }).eq(0).trigger("mouseenter");

        // 本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
        $(".flash ul").css("width", sWidth * (len + 1));

        // 鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
        $(".flash").hover(function() {
            clearInterval(picTimer);
        }, function() {
            picTimer = setInterval(function() {
                if (index == len) { // 如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图
                    showFirPic();
                    index = 0;
                } else { // 如果索引值不等于li元素个数，按普通状态切换
                    showPics(index);
                }
                index++;
            }, 3000); // 此3000代表自动播放的间隔，单位：毫秒
        }).trigger("mouseleave");

        // 显示图片函数，根据接收的index值显示相应的内容
        function showPics(index) { // 普通切换
            var nowLeft = -index * sWidth; // 根据index值计算ul元素的left值
            $(".flash ul").stop(true, false).animate({ "left": nowLeft }, 500); // 通过animate()调整ul元素滚动到计算出的position
            $(".flash .btn span").removeClass("on").eq(index).addClass("on"); // 为当前的按钮切换到选中的效果
        }

        function showFirPic() { // 最后一张图自动切换到第一张图时专用
            $(".flash ul").append($(".flash ul li:first").clone());
            var nowLeft = -len * sWidth; // 通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
            $(".flash ul").stop(true, false).animate({ "left": nowLeft }, 500, function() {
                // 通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
                $(".flash ul").css("left", "0");
                $(".flash ul li:last").remove();
            });
            $(".flash .btn span").removeClass("on").eq(0).addClass("on"); // 为第一个按钮添加选中的效果
        }
    });
</script>
</body>
</html>

CSS 文件 (styles.css)

* { margin: 0; padding: 0; }
body { font-size: 12px; color: #222; font-family: Verdana, Arial, Helvetica, sans-serif; background: #f0f0f0; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { zoom: 1; }
ul, li { list-style: none; }
img { border: 0; }

.wrapper { width: 600px; margin: 0 auto; padding-bottom: 50px; }
.flash { width: 300px; height: 200px; overflow: hidden; position: relative; }
.flash ul { height: 200px; position: absolute; }
.flash ul li { float: left; width: 300px; height: 200px; overflow: hidden; position: relative; background: #000; }
.flash ul li div { position: absolute; overflow: hidden; }
.flash .btnBg { position: absolute; width: 300px; height: 20px; left: 0; bottom: 0; background: #000; }
.flash .btn { position: absolute; width: 290px; height: 20px; left: 0; bottom: 0; padding-left: 10px; }
.flash .btn span { display: inline-block; _display: inline; _zoom: 1; width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 14px; font-family: "Microsoft YaHei", SimHei; margin-right: 10px; cursor: pointer; color: #fff; }
.flash .btn span.on { background: #000; color: #fcc; }

解释

  1. DOM 加载：使用 $(document).ready() 确保 DOM 完全加载后再执行 JavaScript 代码。
  2. 资源加载：确保所有的图片资源已经加载完成。可以使用 window.onload 或者 $(window).load() 来确保所有资源加载完成后再执行代码。
  3. 优化性能：通过优化动画和定时器的设置，减少不必要的重绘和回流，提高性能。

通过以上方法，可以有效解决焦点图短暂显示空白的问题。


html代码无法显示，抱歉

从描述来看，问题可能出现在加载图片的时间延迟上。焦点图加载图片时，如果图片加载速度较慢，可能会导致短暂的空白显示。为了处理这个问题，可以尝试使用图片预加载技术来优化用户体验。

以下是一个简单的示例，展示如何在图片加载之前先预加载它们：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点图示例</title>
<style>
    /* CSS样式同前 */
</style>
</head>
<body>
<div class="wrapper">
    <div class="flash">
        <ul>
            <li><a href="#" target="_blank"><img src="p01.jpg" alt="" /></a></li>
            <li><a href="#" target="_blank"><img src="p02.jpg" alt="" /></a></li>
            <li><a href="#" target="_blank"><img src="p03.jpg" alt="" /></a></li>
            <li><a href="#" target="_blank"><img src="p04.jpg" alt="" /></a></li>
        </ul>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(function() {
        var sWidth = $(".flash").width(); // 获取焦点图的宽度（显示面积）
        var len = $(".flash ul li").length; // 获取焦点图个数
        var index = 0;
        var picTimer;

        // 预加载图片
        function preloadImages() {
            for (var i = 1; i <= len; i++) {
                var img = new Image();
                img.src = "p" + (i < 10 ? "0" : "") + i + ".jpg";
            }
        }

        // 其余代码同前...

解释

  1. 预加载图片：在页面加载完成后立即启动图片预加载，确保所有图片都在需要显示之前就已经加载完成。
  2. 图片加载处理：preloadImages 函数会创建一个新的 Image 对象，并设置其 src 属性为图片路径，从而触发浏览器预加载这些图片。
  3. 其他代码保持不变：其余部分的JavaScript和HTML代码保持不变，但预加载图片应该能够减少或消除空白显示时间。

这样做的目的是通过预加载图片来减少加载时间，提高用户体验。

回到顶部