预加载图像?
我一直在研究使用 JQuery 预加载图像,并遇到了这个 使用 jQuery 预加载图像
现在有人可以吗告诉我,我是否必须以任何方式调用预加载的图像?我假设这会创建一个 img,然后浏览器将其缓存(至少对于该页面),并且我只是通过其 URI 使用预加载的图像?
有人可以在这里澄清一下吗?
I have been looking into Preloading images with JQuery and came across this Preloading images with jQuery
Now can someone tell me, do I have to call the preloaded images in any way? I assume this creates a img and then the browser has it cached (at least for that page) and I just use the preloaded image by it's URI?
Can someone clarify here?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
预加载图像可以通过简单的 JavaScript 行完成:
要预加载 JavaScript 文件,请使用 JavaScript include_DOM 技术并创建一个新的
标签,如下所示:
这是 CSS 版本:
在第一个示例中,请求了图像但从未使用过图像,因此它不影响当前 页。在第二个示例中,脚本被添加到页面中,因此除了被下载之外,还将被解析和执行。 CSS 也是如此——它也将应用于页面。如果您不希望这样做,您仍然可以使用 XMLHttpRequest 预加载资源。
有关“让您的网站超快”的完整教程,请访问我从许多网站和博客中精心挑选的以下链接
使用 jQuery 预加载图像
Preloading an image can be done with a simple line of JavaScript:
For preloading JavaScript files, use the JavaScript include_DOM technique and create a new
<script>
tag, like so:Here’s the CSS version:
In the first example, the image is requested but never used, so it doesn’t affect the current page. In the second example, the script is added to the page, so as well as being downloaded, it will be parsed and executed. The same goes for the CSS — it, too, will be applied to the page. If this is undesirable, you can still pre-load the assets using XMLHttpRequest.
For complete tutorial on, "making your website superfast" please visit the following link which i hand picked from many websites and blogs
Preloading images with jQuery
如果服务器设置了正确的缓存标头,则图像应该被缓存,并且您应该能够仅使用 URL 并立即获取图像。
Provided that the server sets correct cache headers, the image should be cached and you should be able to just use the URL and get the image instantly.
您可以使用以下方法预加载所有图像:
You can preload all your images using this below:
我只使用 CSS 预加载很多内容。我不喜欢 jQuery 版本,因为你必须先等待库加载,如果它们没有启用 JS,或者 jQuery 被延迟,它们在翻转时会有明显的图像更改延迟。
如果您需要在图像完成预加载时回调,请使用 JS/jQuery。否则,请使用 CSS。
这只是使用
:before
的一种方法,因此有浏览器支持限制(< IE8)。这个的好处是您不需要任何额外的 HTML 标记。HTML
CSS
另一种方法是简单地将背景图像设置为页面上的隐藏元素以及需要预加载的图像。
HTML
CSS
I preload a lot using CSS only. I don't like the jQuery versions because you have to wait for the library to be loaded first, and if they don't have JS enabled, or jQuery is delayed, they'll have noticeable image change delays on rollover.
If you need a callback when images have finished preloading, use JS/jQuery. Otherwise, use CSS.
This is just one method which uses
:before
, so has browser support limitations (< IE8). The good thing about this one is you dont need any extra HTML markup.HTML
CSS
Another method would be to simply set background images to hidden elements on your page with the images you need to preload.
HTML
CSS