图像来自数据库,并且是动态创建的.
我想做的是:
在每个< li>上显示“加载”消息并等待背景(图像)加载到缓存中,然后用fadeIn显示.
他们只有我能想到的方式(不是我可以,因为我不太确定如何和如果它的可行)是:
>暂时取消每个< li>的背景设置同时显示“加载”消息
>为每个背景创建一个循环以获取图像网址
>使用$.get函数加载它,然后在加载后做任何我想要的
除了可行的事情之外,这意味着它们将按顺序加载,因此如果由于某种原因不能加载脚本永远不会继续!
我看到一些使用JS加载图像的网站只有在浏览器可见时才可以加载图片,也许这可能与我正在寻找的情况相同,因为我使用滚动条,只有一部分图像显示在一次和何时加载页面
解决方法
诀窍是创建一个新的图像(使用the Javascript image object),并确保已加载,但此图像不显示.图像加载后,在缓存中,该图像将作为您的图库中的背景图像.
所以你要做的就是确保在相应的图像被加载之后,只改变图像的LI的背景图像.您最初可以使用默认的“加载”图像加载所有的LI.
所以你的代码将是这样的:
HTML(加载图像的样式定义可以在外部样式表中):
<ul> <li id="pic1" style="background-image:url('images/loading.gif')"></li> <li id="pic2" style="background-image:url('images/loading.gif')"></li> <li id="pic3" style="background-image:url('images/loading.gif')"></li> ... </ul>
你的jQuery / Javascript:
var img = new Array(); // The following would be in some sort of loop or array iterator: var num = [NUMBER] // You'd use this number to keep track of multiple images. // You Could also do this by using $("ul>li").each() and using the index # img[num] = new Image(); // Specify the source for the image var imgSource = "http://yourimage.com/example.jpg"; // only append the corresponding LI after the image is loaded img[num].onload = function() { $("#pic" + num).attr("style","background-image:url('" + imgSource + "')"); }; img[num].src = imgSource;
您必须为每个LI拥有适当的CSS / ids等,并且您必须将上述内容适用于您用于显示您的图库的循环或函数.
Here’s a jsFiddle example.(为了测试目的,这是一个很大的图像,所以需要一段时间才能加载).
原文地址:https://www.jb51.cc/jquery/176356.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。