jQuery 图像加载

发布于 2024-10-21 01:21:27 字数 839 浏览 1 评论 0原文

$('.photoRow a[id^=clickPhoto]').click(function()
    {
        $('#layerBg').show();
        $(this).show();
        var id = parseInt($(this).attr('id').substr(10));

        var img = new Image();
        img.src = '/p/' + id + '.jpg';

        $('.photoWindow').fadeIn().html(img);        
        var pWidth = $(window).width();
        var pTop = $(window).scrollTop();
        var eWidth = $('.photoWindow').width();
        alert(eWidth);
        $('.photoWindow').css('top', pTop + 10 + 'px');
        $('.photoWindow').css('left', parseInt((pWidth / 2) - (eWidth / 2)) + 'px');
        $('.photoWindow').show();
    });

eWidth = 600（CSS 中默认）；我需要仅在将图像（img）加载到类 .photoWindow 后才考虑 eWidth

如果我的图片在缓存中，则 eWidth 是正确的。

如果我的图片宽度为 912，那么 eWidth 值应该是 912，而不是 600..

我希望你理解我.. 抱歉英语不好！

原文

$('.photoRow a[id^=clickPhoto]').click(function()
    {
        $('#layerBg').show();
        $(this).show();
        var id = parseInt($(this).attr('id').substr(10));

        var img = new Image();
        img.src = '/p/' + id + '.jpg';

        $('.photoWindow').fadeIn().html(img);        
        var pWidth = $(window).width();
        var pTop = $(window).scrollTop();
        var eWidth = $('.photoWindow').width();
        alert(eWidth);
        $('.photoWindow').css('top', pTop + 10 + 'px');
        $('.photoWindow').css('left', parseInt((pWidth / 2) - (eWidth / 2)) + 'px');
        $('.photoWindow').show();
    });

eWidth = 600 (default in css);
I need to make eWidth considered only after the image (img) loaded into the class .photoWindow

If my picrute in the cache that eWidth is correct.

If my picture has a width of 912, then the value eWidth should be 912, but not 600..

I hope you understand me.. Sorry for bad english!

分享到QQ

分享到微博

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

发布评论

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

醉梦枕江山 2024-10-28 01:21:28

从您的代码来看，您似乎正在尝试从 photoWindow 元素的宽度中提取 eWidth。为什么不从图像本身获取它呢？

eWidth = $('.photoWindow img').width();

我可能还遗漏了一些东西，但我不清楚为什么要在 photoWindow 上执行 fadeIn() 和 show() - fadeIn() 将在完成触发后显示该元素。

您还可以重构在 photoWindow 上运行的最终代码块，如下所示：

$('.photoWindow').css({
  top: pTop + 10 + 'px',
  left: parseInt((pWidth / 2) - (eWidth / 2)) + 'px')
});

From your code, it looks as if you're attempting to pull the eWidth from the width of the photoWindow element. Why not grab it from the image itself?

eWidth = $('.photoWindow img').width();

I may also be missing something, but I'm unclear as to why you're performing a fadeIn() and a show() on the photoWindow - fadeIn() will display the element once it's completed firing.

You may also be able to refactor that final block of code operating on the photoWindow like this:

$('.photoWindow').css({
  top: pTop + 10 + 'px',
  left: parseInt((pWidth / 2) - (eWidth / 2)) + 'px')
});

回复收藏 0 原文

朱染 2024-10-28 01:21:27

如果我理解你的问题，你只想在加载图像后评估 eWidth。
首先，您的图像在哪里加载以及使用photoWindow类的元素是什么？

假设它位于 img 元素上。如果是这样，您可以使用 :

$('.photoWindow').load(function() {
        eWidth = $('.photoWindow').width();
        $('.photoWindow').css('top', pTop + 10 + 'px');
        $('.photoWindow').css('left', parseInt((pWidth / 2) - (eWidth / 2)) + 'px');
        $('.photoWindow').show();
});

因此，每当加载元素时，您都会计算图像并将其放置在您想要的任何位置。

If I understood your question, you want to evaluate eWidth only after the image is loaded.
First where is your image loaded and what is the element using the class photoWindow?

Supposing it's on an img element. If that's so you could use :

$('.photoWindow').load(function() {
        eWidth = $('.photoWindow').width();
        $('.photoWindow').css('top', pTop + 10 + 'px');
        $('.photoWindow').css('left', parseInt((pWidth / 2) - (eWidth / 2)) + 'px');
        $('.photoWindow').show();
});

So whenever the <img> element is loaded you'll calculate and place the image wherever you want.

回复收藏 0 原文

~没有更多了~