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

标签 jquery css image loading lazy-evaluation

<分区>

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

<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 属性？

最佳答案

你可以使用.load()

$('img.big').load(function() {
    if($(this).attr('src') == $(this).attr('data-original')) {
        $(this).css({'height': 'auto', 'width': '100%'});
    }
});

http://jsfiddle.net/TYufy/4/ - 使用 .load()

的示例

关于jquery - 图像延迟加载(jQuery)后如何更改CSS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12451641/

上一篇：css - 如何添加一些CSS/html5效果让它有火热的错觉？

下一篇：jquery 隐藏和显示打印

相关文章：

javascript - 图像将整个 body 向右移动

image - 在 html5 Canvas 上旋转单个图像(而不是其他图像)？

javascript - 在 jQuery 中获取就绪函数代码下方的元素？

javascript - 实用地将日期字符串转换为 yyyy-mm-dd

jquery - jQuery 验证远程的错误响应不起作用

css - 如何将渐变应用于div的边框？

javascript - 如何使用 jquery .when().apply() 一次从多个 promise 中获取已解析的数据

javascript - 如何在没有浏览器嗅探的情况下支持 transitionend？

php - 如何将 mysql php 中的图像显示到 android 中？

javascript - document.getElementsByTagName ('img' ) ，如何只获取png图片？