使用 jquery 预加载具有特定类的图像
是否可以预加载应用了特定类的图像?
例如 - 仅预加载类为“.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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果您试图解决的问题是更快地加载页面中具有
grid
类的图像,那么就没有办法做到这一点。要在页面中查找具有grid
类的图像,您必须等待 DOM 加载,然后搜索 DOM 来查找这些图像。当您执行此操作时,浏览器已经开始加载它们。此时,您在 Javascript 中无法执行任何操作,都无法使图像加载速度更快。浏览器已经在加载它们。我知道你唯一能做的就是创建一个你想要加载的 URL 数组,你可以在 javascript 的第一部分(
head
标记中的脚本)中预加载这些 URL,然后这“可能”会让图像加载得更快一些。但是,为了做到这一点,您必须手动列出要应用此功能的图像。您不能等待页面加载并在页面中查找它们,因为到那时,它们已经以最快的速度加载。如果您控制服务器端代码,您可以在服务器端生成此图像列表并将该数组放入 JS 中。如果这样做,它看起来像这样:在大多数浏览器中,这应该在某种程度上优先考虑这些图像的加载,因为它们的请求将在页面开始加载之前首先启动。
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 thegrid
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: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.