使用 jquery 预加载具有特定类的图像

发布于 2024-12-06 11:43:06 字数 156 浏览 0 评论 0原文

是否可以预加载应用了特定类的图像?

例如 - 仅预加载类为“.grid”的图像

我已经看到了很多基于数组的预加载示例,但我的图像名称是动态生成的(我使用的是 Drupal 6),并且我不想预加载除非必须,否则全球图像。

有什么想法吗? 谢谢 斯蒂芬妮

Is it possible to preload images that have a specific class applied to them?

for example - preload only images with class '.grid'

I've seen lots of examples of preload based on array, but my image names are dynamically generated (I'm using Drupal 6), and I don't want to preload the images globally unless I have to.

Any ideas?
Thanks
Stephanie

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

半城柳色半声笛 2024-12-13 11:43:06
var imgs = new Array();
$('img.grid').each(function(idx){
 var i = new Image();
 i.src = $(this).attr('src');
 imgs.push(i);
});
var imgs = new Array();
$('img.grid').each(function(idx){
 var i = new Image();
 i.src = $(this).attr('src');
 imgs.push(i);
});
庆幸我还是我 2024-12-13 11:43:06

如果您试图解决的问题是更快地加载页面中具有grid类的图像,那么就没有办法做到这一点。要在页面中查找具有 grid 类的图像,您必须等待 DOM 加载,然后搜索 DOM 来查找这些图像。当您执行此操作时,浏览器已经开始加载它们。此时,您在 Javascript 中无法执行任何操作,都无法使图像加载速度更快。浏览器已经在加载它们。

我知道你唯一能做的就是创建一个你想要加载的 URL 数组,你可以在 javascript 的第一部分(head 标记中的脚本)中预加载这些 URL,然后这“可能”会让图像加载得更快一些。但是,为了做到这一点,您必须手动列出要应用此功能的图像。您不能等待页面加载并在页面中查找它们,因为到那时,它们已经以最快的速度加载。如果您控制服务器端代码,您可以在服务器端生成此图像列表并将该数组放入 JS 中。如果这样做,它看起来像这样:

<head>
<script type="text/javascript">
var preloadURLs = [
    "http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg",
    "http://photos.smugmug.com/photos/344290837_ypsKL-Ti.jpg"
];

var preloadImgs = [], img;
for (var i = 0; i < preloadURLs.length; i++) {
    img = new Image();
    img.src = preloadURLs[i];
    preloadImgs.push(img);
}

</script>
</head>

在大多数浏览器中,这应该在某种程度上优先考虑这些图像的加载,因为它们的请求将在页面开始加载之前首先启动。

If the problem you are trying to solve is to load images in your page that have the grid class faster, then there is no way to do that. To find the images in your page that have the grid class, you'd have to wait for the DOM to load and then search the DOM to find those images. At the point you are doing that, the browser is already working to load them. Nothing you can do in Javascript at that point can make the image load go any faster. The browser is already loading them.

The only thing I know that you could do is to make an array of the URLs that you want to load and you can preload those in the very first part of your javascript (script in the head tag) and this "might" get the images loading a little faster. But, in order to do this, you'd have to manually list out the images you want to apply this to. You can't wait for the page to load and look for them in the page because, by then, they're already being loaded as fast as they can be. If you control the server-side code, you could generate this list of images server-side and put that array into the JS. If you did that, it would look something like this:

<head>
<script type="text/javascript">
var preloadURLs = [
    "http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg",
    "http://photos.smugmug.com/photos/344290837_ypsKL-Ti.jpg"
];

var preloadImgs = [], img;
for (var i = 0; i < preloadURLs.length; i++) {
    img = new Image();
    img.src = preloadURLs[i];
    preloadImgs.push(img);
}

</script>
</head>

In most browsers, this should serve to somewhat give priority to the loading of these images since their requests would be launched first before the page starts to load.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文