jQM / jquery-collagePlus使用问题

Question

我正在使用jQM构建应用程序，我正在尝试使用jquery-collagePlus（http://ed-lea.github.io/jquery-collagePlus/）

这是jsfiddle：http://jsfiddle.net/z5HfK/

我的HTML：

<div class="collage">
    <img src="http://mywaiter.my/images/food1.jpg">
                    <img src="http://mywaiter.my/images/food2.jpg">
                    <img src="http://mywaiter.my/images/food3.jpg">
                    <img src="http://mywaiter.my/images/food4.jpg">
                    <img src="http://mywaiter.my/images/food5.jpg">
                    <img src="http://mywaiter.my/images/food6.jpg">
                    <img src="http://mywaiter.my/images/food7.jpg">
                    <img src="http://mywaiter.my/images/food8.jpg">
                    <img src="http://mywaiter.my/images/food9.jpg">
                </div>

JS：

$(window).load(function () {
        $('.collage').collagePlus();
    });

它似乎不起作用，因为我是JS的新手，我不太清楚为什么。

在我的app测试中，加载jQM页面后所有图像都消失了。

请告知我做错了什么。谢谢。

Answer 1

使用jQuery Mobile时，您需要使用适当的jQuery Mobile页面事件，在这种情况下，它是showpage（jQuery Mobile 1.4及以下版本）或pagecontainershow（jQuery Mobile 1.4及以上版本）。

工作示例：http://jsfiddle.net/Gajotres/26WXB/4/

jQuery Mobile 1.4及以上

$(document).on('pagecontainershow', function (e, ui) {
    var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage').attr('id');
    if(activePage === 'index') {
        $('.collage').collagePlus(
            {
                // change this to adjust the height of the rows
                'targetHeight' : 100,
                // change this to try different effects
                // valid effets = effect-1 to effect-6
                'effect' : "effect-1"
            }
        );   
    }
});

或jQuery Mobile 1.4及以下版本：

$(document).on('pageshow', '#index', function(){ 
    $('.collage').collagePlus(
        {
            // change this to adjust the height of the rows
            'targetHeight' : 100,
            // change this to try different effects
            // valid effets = effect-1 to effect-6
            'effect' : "effect-1"
        }
    );             
});