为元素预加载 js

发布于 2024-10-31 16:02:15 字数 631 浏览 3 评论 0原文

有一个div #container，其中包含带有大背景图像的各种div，

我想使用一些Pre-Image loading js来避免加载图像的丑陋外观。

但问题是我找不到任何在后台加载所有图像的脚本，而是在 #container 中显示加载栏。

尽管互联网上充满了加载全身图像的脚本，但我只想加载一个元素，同时其他所有内容（例如内容）都是可见的。

更新的问题： 以下脚本适用于 CSS 中指定的背景图像吗？

$('#container img:last').load(function(){ 
  //do stuff
});

更新：最好的解决方案是使用这个 jQuery 插件，它称为“preloadCssImages”。您可以在此处找到它。

它预先加载所有存在的 css 图像，甚至不需要做所有这些事情。

原文

There is a div #container which contains various divs with large background images,

I want to use some Pre-Image loading js for avoiding the ugly look of loading image.

But the problem is that I can't find any script which loads all images in background and instead in #container display a loading bar.

Though Internet is full of scripts which loads images for whole body but I want just for an element meanwhile everything else is visible such as content.

UPDATED Question:
Would the following script work for the background images specified in CSS?

$('#container img:last').load(function(){ 
  //do stuff
});

UPDATE:Best solution is get hold of this jQuery plugin, its called "preloadCssImages". You can find it here.

It pre loads all the css images present without even bothering to do this all stuff.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小霸王臭丫头 2024-11-07 16:02:15

您可以等待容器中的最后一个图像加载，然后执行您的操作。
所以像这样

$('#container img:last').load(function(){
//做事
});

回复收藏 0 原文

找回味觉 2024-11-07 16:02:15

首先在容器内设置加载图像：

<div id="container"><img src="loading.gif" class="loading"/></div>

当所有图像加载完成后，清空 #container div 并将所有图像附加到 div 中，如下所示：

$('#container img:last').load(function(){
$('#container img.loading').remove();
})

First set a loading image within the container:

<div id="container"><img src="loading.gif" class="loading"/></div>

When all images load complete, then empty #container div and append all images into the div like this:

$('#container img:last').load(function(){
$('#container img.loading').remove();
})

回复收藏 0 原文

揽清风入怀 2024-11-07 16:02:15

一个优雅的解决方案是使用 CSS 级联。 HTML：

<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>

CSS：

.c1 { background: #fff }
.c2 { background: #eee }
.loadimages .c1 { background: url(big1.jpg); }
.loadimages .c2 { background: url(big2.jpg); }

JS（加载时或准备好时）：

document.getElementsByTagName('body')[0].className += 'loadimages';

大多数浏览器仅根据需要加载未使用的图像，或在触发窗口加载事件后加载它。然而，图片也是按照遇到的顺序放入加载队列的，所以即使上面的JS是在DOM准备好时执行的，它仍然会在.loadimage类后面没有级联的所有其他图片之后加载图片。

An elegant solution is to use CSS cascading. HTML:

<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>

CSS:

.c1 { background: #fff }
.c2 { background: #eee }
.loadimages .c1 { background: url(big1.jpg); }
.loadimages .c2 { background: url(big2.jpg); }

JS (on load or whenever you're ready):

document.getElementsByTagName('body')[0].className += 'loadimages';

Most browsers only load unused images as needed, or load it after the window load event is fired. However, images are also put in the load queue in the order that they are encountered, so even if the JS above is executed on DOM ready, it will still load the images after all the other images that are not cascaded behind the .loadimage class.

回复收藏 0 原文

~没有更多了~