jQuery 图像调整大小出错了！
几天前，我想知道为什么当我将网站上图像的宽度和长度属性设置为百分比时，它没有按照我想象的方式缩小图像。
问题是我希望它缩小图像，但它实际上缩小了图像的容器。
无论如何，我实际上很喜欢 Pat 的建议，即使用 jQuery 片段调整图像大小，因为我可以轻松地将其应用于所有具有 fancybox 类的图像，换句话说，我的产品图像，单击后，显示fancybox效果。
然而，由于某种原因，它的行为有点古怪。
如果您使用浏览器，则可以在我的页面上查看问题，网址为 http://www.marioplanet。 com/product.htm 您可能会看到问题。
如果您之前访问过我的网站以帮助我进行调试（对此我表示感谢），请确保删除我网站的 cookie，并清空缓存，因为它似乎只在第一次访问时出现问题。
对于不同的浏览器，问题似乎有所不同：
Firefox (3.6.8) 和 IE (8)：在粗体文本下方：“Category Plush”，其中图像应适当调整大小，但它们太小了。
Chrome (5.0.375.125) 和 Safari (5)：在图像应位于的相同粗体文本下方，只有两个带轮廓的方块，没有其他内容。
我发现的不更新代码的“修复”似乎是：
Firefox (3.6.8) 和 IE (8)：简单的刷新，图像就会恢复到我希望它们首先达到的大小访问。
Chrome (5.0.375.125) 和 Safari (5)：通过将这两个浏览器指向 URL http:// /www.marioplanet.com/product.htm# 可以通过添加井号 (#) 或单击“关注我们”社交网络托盘中的 YouTube 图标轻松完成，图像的大小将会调整我希望他们第一次访问时的样子。
所以，我在想，关于 jQuery 片段，也许 .width() 操作没有得到广泛的支持，谷歌搜索没有产生任何结果，如果它不能在任何主要浏览器上正常工作，那就没有意义了。
所以，然后我想也许 jQuery 的片段不在 $(document).ready 事件处理程序中，因此 DOM 以及图像没有被正确加载。经过对我的代码的调查，一切看起来都正常。
最后，我想知道我的图像上剩余的任何尺寸是否已经搞砸了 jQuery 调整大小，一切似乎都正常，但也许它与表格、表格行和单元格的宽度有关？
任何有关问题所在的建议或想法将不胜感激！
谢谢！
A few days ago, I was wondering why when I set the images' width and length attributes on my site to percentages, it wasn't scaling the image down the way I thought it should.
The problem was that I wanted it to scale the image down, but it was actually scaling down the images' container.
Anyway, I was actually fond of Pat's suggestion to resize the images using a snippet of jQuery, because I can easily apply it to all of my images that have a class of fancybox, in other words, my product images, which, upon clicking, display the fancybox effect.
However, for some reason, it is behaving kind of screwy.
If you point your browser so you can view the problem on my page, at http://www.marioplanet.com/product.htm you may see the problem.
If you have visited my site before in order to help me debug, which I appreciate, please make sure you delete your cookies for my site, and empty the cache, as it appears to only have a problem upon a first visit.
The problem appears to be different for different browsers:
Firefox (3.6.8) and IE (8): Underneath the bold text reading: "Category Plush" where the images should be properly resized, they are way to small.
Chrome (5.0.375.125) and Safari (5): Underneath that same bold text where the images should be, there are just two outlined squares and nothing else.
The "fixes" that I have found as far as not updating the code appear to be:
Firefox (3.6.8) and IE (8): A simple refresh, and the images go back to the size I want them to be upon first visiting.
Chrome (5.0.375.125) and Safari (5): By pointing these two browsers to the URL http://www.marioplanet.com/product.htm# which can easily be done by adding the pound symbol (#) or by clicking the YouTube icon in the "Follow Us On" social networking tray, the images will be sized the way I would like them to be upon first visit.
So, I was thinking, regarding the jQuery snippet, that perhaps the .width() action doesn't have widespread support, Googling yielded no results, and that wouldn't make sense to not have it work well across ANY major browser.
So, then I was thinking perhaps the snippet of jQuery was not in the $(document).ready event handler, so the DOM, and therefore the images, had not been properly loaded. Upon investigation of my code, everything looked ok.
Finally, I was wondering if any sizing remaining on my images had screwed up the jQuery resizing and everything again seemed ok, but perhaps it has to do with the width of the tables and table rows and cells?
Any suggestions or ideas as to what the problem is would be much appreciated!!
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
问题确实是你的
$(document).ready处理程序，当它运行时，DOM 已准备好，图像可能还没有准备好，并且可能不会在第一次加载时。它在重新加载时起作用的原因是图像被缓存，因此可以立即加载。不过，有一个简单的解决方案，使用
window.onload事件代替$(document).ready，如下所示：主要区别在于
onload在图像加载之后运行，因此.width()将为您提供正确的值，而不是0。The problem is indeed your
$(document).readyhandler, when this runs the DOM is ready, images may not be, and probably won't be on the first load. The reason it works on reload is the images are cached, and so are loading instantly.There's an easy fix for this this though, instead of
$(document).readyuse thewindow.onloadevent, like this:The main difference is that
onloadruns after the images are loading, so.width()will give you the correct value, instead of0.