gpt4 book ai didi

jquery - 图像延迟加载(jQuery)后如何更改CSS?

转载 作者:行者123 更新时间:2023-11-28 18:36:51 25 4
gpt4 key购买 nike

<分区>

我遇到了以下问题:用户单击缩略图后,会通过延迟加载加载并打开更大的图像。加载大图的代码是:

<img width="663" height="845" class="big" data-original="real/path/to/image" src="path/to/empty/small/picture">

当用户点击缩略图时,执行以下代码:

$("img.thumb").click(function() 
{
var $cont = $(this).siblings('.item-content').children('.big');
$cont.attr('src', $cont.attr("data-original"));
setTimeout(function(){
$cont.css({'height': 'auto', 'width': '100%'});
}, 600);
});

每个大图像都必须将 CSS "height" 设置为 "auto",并将 "width" 设置为 “100%” 因为我正在制作响应式/流体布局。上面的代码从 "data-original" 属性中获取它的 "src" 属性值。但是 "height: auto""width:100%" 在这个例子中被设置为 600ms 在属性完成它们的替换之后。这不起作用,因为我为此使用了 Isotope jQuery 插件 ( http://isotope.metafizzy.co/ ),并且此插件需要元素的实际宽度和高度才能正确定位网格。在加载图像期间设置 "height: auto""width:100%" 时,插件会丢失并错误地定位元素。

那么如何编写代码以在图像加载后设置这 2 个 CSS 属性?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com