imagesLoaded插件不工作

這是我的嘗試，這是行不通的。它觸發，但imagesLoaded插件不工作

的jsfiddle imagesloaded不 '淡入' 附：http://jsfiddle.net/NgwTa/

var insert = "<div class='thediv'><img src='http://s1.cdn.autoevolution.com/images/news/gallery/mercedes-c63-amg-black-series-tuned-by-vath-photo-gallery_9.jpg'></div><br><div class=thediv><img src='http://s1.cdn.autoevolution.com/images/news/gallery/mercedes-c63-amg-black-series-tuned-by-vath-photo-gallery_9.jpg'></div>"; 


$('.clickit').click(function(){ 

    $('.container').imagesLoaded(function(){ 
     $('.box').html(insert); 
    }); 


});

來源

2013-08-29 parte bena

隱藏.box的類CSS。 – ronnyfm

看這個JSfiddle

代碼：

var insert = "<div class='thediv'><img src='http://s1.cdn.autoevolution.com/images/news/gallery/mercedes-c63-amg-black-series-tuned-by-vath-photo-gallery_9.jpg'></div><br><div class=thediv><img src='http://s1.cdn.autoevolution.com/images/news/gallery/mercedes-c63-amg-black-series-tuned-by-vath-photo-gallery_9.jpg'></div>"; 

$('.clickit').click(function(){ 

    $('.container').imagesLoaded(function(){ 
     $('.box').hide().html(insert).fadeIn(); 
    }); 
});

您必須聲明fadeIn()和hide()第一，你可以設置結果爲fadeIn()

來源

2013-08-29 23:05:18 aldanux

這不是插件的工作原理 –

最好用一個普通的CSS類來隱藏它。 – ronnyfm

問題是你問的容器，如果所有的圖像已加載之前任何圖像已被追加。因此該功能即時運行。

嘗試在追加後運行您的imagesLoaded插件。

淡入所有圖像都加載之後：

$('.clickit').click(function(){ 

    // Hide the box and insert the images 
    $('.box').hide().append(insert); 

    // Wait for the images to load 
    $('.container').imagesLoaded(function(){ 
     $('.box').fadeIn(); 
    }); 

});

的jsfiddle：他們加載http://jsfiddle.net/G2684/

淡出單獨的圖像：

$('.clickit').click(function(){ 

    $('.box').append(insert); 
    $('.thediv img').hide(); 

    $('.container').imagesLoaded().progress(function(instance, image){ 
     $(image.img).fadeIn(); 
    }); 

});

的jsfiddle：http://jsfiddle.net/G2684/1/

來源

2013-08-29 23:13:35 Mark

這會在所有.box中淡出，它不會單獨處理圖像 –

然後，您需要在'progress'事件中運行'fadeIn'。看到我更新的帖子。 – Mark

最簡單的方法

$('.clickit').click(function(){ 
     $('.box').html(insert); 
     $('.container img').load(function(){ 
       $('.container').fadeIn("slow"); 
     }); 
    });

上的jsfiddle

http://jsfiddle.net/NgwTa/6/

來源

2013-08-29 23:16:06

這不是對示例中列出的插件的解決方案 –

imagesloaded插件是不褪色的圖像。它只是在圖像加載到瀏覽器時引發回調。

喲需要添加一個額外的行在您的CSS隱藏圖像第一。

.thediv img { 
width:300px; 
height:200px; 
display:none}

然後在您的腳本中添加一個淡入圖片。

$('.clickit').click(function(){ 

    $('.container').imagesLoaded(function(){ 
     $('.box').html(insert); 
     $('.thediv img').fadeIn(); 
    }); 


});

這裏的，而不是用JavaScript隱藏它JSfiddle

來源

2013-08-29 23:19:14

回答

相關問題