通过 AJAX 加载内容和预加载图像?

发布于 11-29 16:33 字数 410 浏览 1 评论 0原文

假设我喜欢:

$(function() {
    $('a').click(function(e) {
        e.preventDefault();
        var h = $(this).attr('href');
        $('#content').load(h);
    });
});

实际上并没有加载图像,它只是加载内容,那么您如何加载实际图像呢?

有些人似乎不明白:我的意思是它确实加载图像但不“预加载”,因此意味着您会看到图像单独加载。

编辑:假设 href 等于 somepage.html 并且该页面上有图像和内容,是的,它会加载图像和内容,但实际上根本不会预加载图像,您仍然看到图像单独加载。如何在请求本身中预加载图像?

Say I have like:

$(function() {
    $('a').click(function(e) {
        e.preventDefault();
        var h = $(this).attr('href');
        $('#content').load(h);
    });
});

That actually doesn't load the images as well it just loads the content, how do you go about loading the actual images too?

Some people didn't seem to understand: what I mean is it does load the images but doesn't 'preload' thus meaning you witness the images load individually.

Edit: Say the href was equal to somepage.html and that page had images on it as well as content, yes it would load the images and the content but it doesn't actually preload the images at all, you're still witnessing the images load individually. How would one go about preloading the images in the request itself?

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

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

发布评论

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

评论(2

苏别ゝ2024-12-06 16:33:51

试试这个:

  1. 隐藏 #content div,然后调用 load 。这将以不可见的方式加载内容,以便您的用户看不到图像加载后
  2. 在每个图像上绑定 load 事件处理程序,当它们全部触发时,重新显示 #content div

请参阅此答案以供参考:了解 AJAX 响应中图像何时完成加载< /a>.它将准确地告诉您该做什么。

Try this:

  1. Hide the #content div, and call load on it. This will load the content invisibly so your users don't see the images load afterwards
  2. Bind load event handlers on each image, and when they have all fired, re-show the #content div

See this answer for reference: Know when images are done loading in AJAX response. It will show you exactly what to do.

独闯女儿国2024-12-06 16:33:51

请参阅此处有关如何预加载图像的工作示例;

http://engineeredweb.com/blog/09/12/preloading -images-jquery-and-javascript

See the worked example here on how to preload your images;

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

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