使用 javascript 事件加载浏览器图像？
我有一个包含大量图像的页面，当我使用选项卡式 div 时，这些图像最初是隐藏在视图中的（即使用 CSS display:none 隐藏一些 div）。
因此，当页面加载时，需要很长时间才能加载所有图像，看起来页面很慢（因为浏览器上的加载栏需要 10 多秒才完成）。
我想要一种在页面上可见之前不加载图像的方法。
我玩过 jQuery LazyLoad，但这似乎只在滚动浏览器时加载图像（这不适用于选项卡式 div）。
因此，是否有一种方法可以将 LazyLoad 更改为这样工作，或者是否有更好的方法？
谢谢！
I've got a page containing a lot of images, which are initially hidden from view as I'm using tabbed divs (ie. hiding some divs using CSS display:none).
Therefore, when then page loads, it takes ages to load all of the images, which looks like the page is slow (as the loading bar on the browser doesn't complete for 10+ seconds).
I would like a way of not loading images until they are visible on the page.
I've played around with jQuery LazyLoad, however this only seems to load images when scrolling the browser (which doesn't work for tabbed divs).
Therefore, is there a way of changing LazyLoad to work like this, or is there a better way of doing this?
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我之前没有意识到这一点，但 LazyLoad 确实支持从事件触发：
http://www.appelsiini.net/ items/lazyload
如果有人需要帮助我了解我是如何做到这一点的，请告诉我！
I was unaware of this previously, but LazyLoad does support triggering from events:
http://www.appelsiini.net/projects/lazyload
If anyone needs a hand on how I did this, let me know!
我最近尝试过，不得不说这对于 js 来说是不可能的了。也许从来都没有...
像lazyload这样的项目一直宣称它们会在启动时停止加载所有图像，但你可以在firebug中看到这不起作用。图像甚至会加载两次，在 domready 上以及当您开始滚动时...
您唯一的选择是手头的 ajax 或执行类似以下操作：
然后在 div 可见时切换属性，以便图像开始加载。
至少如果您不需要谷歌索引它们，这也可以正常工作。
希望有帮助！ :)
编辑：嗯，为什么当我刚刚给出答案时我得到了-1？只需查看带有延迟加载的页面并启用 firebug，然后滚动页面即可。甚至有人在 stackoverflow 上和惰性加载插件的评论中说这是目前唯一的解决方案......:(
I have tried that lately and have to say that this is not possible with js anymore. Maybe it has never been...
Projects like lazyload have always proclaimed that they would stop all images from loading on startup, but you can see in firebug that this does not work. The images are even loaded twice, on domready and when you start scrolling...
Your only choices would be ajax on the on hand or doing something like this:
and then switch attributes when the divs become visible, so the image starts loading.
This works fine as well at least if you don't need google indexing them.
Hope that helps! :)
Edit: Hm, why did I get a -1 when I was just givin an answer? Just have a look at pages with lazyload and enable firebug and then scroll the page. It was even said here on stackoverflow and in the comments for the lazyload plugin that this is the only solution at the moment ... :(
如果您唯一的目标是“隐藏”由于大量图像而花费很长时间的进度条，我会选择某种 AJAX 解决方案，因为这样进度条就不会被“使用”。它确实会在您想要加载 HTML 元素的方式（以及可能的加载时间）方面引入更多的复杂性。
我个人不喜欢将 HTML 属性用于其原始目的以外的任何用途，因此将路径存储在另一个属性中并在需要时进行切换并不是我的第一选择。相反，我会尝试创建一个 JavaScript 数组（id => path）并在需要时更新单独的 HTML IMG 元素。
祝你好运！ ;)
If your only goal is to 'hide' the progress bar which is taking so long due to the large number of images, I'd go for some kind of AJAX solution, since that way the progress bar is not 'used'. It does introduce more complexity in the way you want to load your HTML elements (and possibly when).
I personally don't like using HTML attributes for anything other than their original purpose, so storing the path in another attribute and switching when needed would not be my first option. Instead, I'd try to create a JavaScript array (id => path) and update the separate HTML IMG elements when needed.
Good luck! ;)
如果您正在使用（或可以使用）HTML5 文档类型，则可以使用标签属性的“data-”前缀：
然后您可以使用 Javascript 使用 data-src 填充 src：
If you're using (or can use) the HTML5 doctype, you can use the "data-" prefix for tag attributes:
And then you can use Javascript to fill the src with the data-src:
一种攻击计划：
不要将图像 URL 放在 img 标签的 src 属性中，而是将其放在其他位置（例如，上面有特定类的隐藏范围），并且在显示 div 时，迭代所有 img 标签并设置src 到它应该有的 URL。
作为一种方法，它肯定有一些缺点。
One plan of attack:
Instead of putting the image URL in the src attribute of the img tag, put it somewhere else (e.g. a hidden span with a particular class above it) and when showing the div, iterate through all the img tags and set the src to the URL it should have had.
As a method it's definitely got some downsides.
也许 jQuery Tabs 可以满足您的需求，在选项卡上调用 ajax...
您如何显示你的隐藏div？
Maybe jQuery Tabs could do what you need, with ajax call on tabs...
How do you display your hidden divs?