gpt4 book ai didi

javascript - 在页面加载时加载图像,CSS

转载 作者:可可西里 更新时间:2023-11-01 13:11:06 27 4
gpt4 key购买 nike

我最近问了一个关于使用 Java Script 使用图像作为按钮的问题。我得到的答案让我改用 CSS 并且工作正常。然而,我使用的图像加载大约需要 0.2 秒。

在我使用这段代码之前,我让我的页面在开始时加载所有图像,然后一个 JS 脚本在某些鼠标事件下修改图像的 zIndex,但是这会覆盖 href 链接并且无法工作。

使用新代码,所有功能都可以正常工作,因此会添加 href,但每次页面加载时仅加载第一个图像,当触发鼠标事件时,我正在加载此图像下使用的其他 2 个图像。这意味着执行操作时按钮会闪烁。我如何修改此代码以在页面加载的同时加载图像?

代码在这里:http://jsbin.com/casoy/12/edit?html,css,output

我认为我应该显示旧代码,因为我们...:http://jsbin.com/casoy/13/edit?html,css,js,output

最佳答案

只有触发css样式才会调用下载图片

有几种方法可以做到这一点,并根据您的喜好组织 html,

- here is a crude example using your code 来说明原理。

标记

<div class="preload1"></div>
<div class="preload2"></div>

<a href="http://officialacescottie.co.uk/Home/Home.html">click me</a>

*CSS *

a {
display: block;
width: 600px;
height: 114px;
background-image:url("/Buttons/Home.gif");
text-indent: -9999px;
outline: 0;
}
a:hover, .preload1 {
background-image:url("/Buttons/HomeP.gif");
}
a:active, .preload2 {
background-image:url("/Buttons/HomeC.gif");
}
/* hide these off page in a way that
the browser will still call the background-image */
.preload2, .preload1 {
position:absolute; left:-9999px; top:-9999px;
}

/* image urls are shortened here only so it presents better on SO */

这显示了基本原理,即当 a:hover 被触发时,引用的背景图像已经有机会“预加载”到浏览器缓存。

关于javascript - 在页面加载时加载图像,CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21795890/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com