圖片未在網頁中首次加載

Question

首次加載網站時無法加載圖片。

網址： http ： //shalva.in/image/gallery.php

我正在使用json獲取數據。

Gallery.php

<div class="img-prev_gallary">
<h2>Gallery</h2>      
<div id="container"></div>

<div id="page-navigation" class="hide clear">
    <span class="disabled page-navigation-prev" title="Image"</span>
    <a href="?&p=1" data-target="page" data-page="1" class="cur">1</a>
    <a href="?&p=2" data-target="page" data-page="2">2</a>
    <a href="?&p=3" data-target="page" data-page="3">3</a>
    <a href="?&p=4" data-target="page" data-page="4">4</a>
    <a href="?&p=5" data-target="page" data-page="5">5</a>
    <a href="?&p=6" data-target="page" data-page="6">6</a>
    <a href="?&p=7" data-target="page" data-page="7">7</a>
    <a href="?&p=8" data-target="page" data-page="8">8</a>
    <a href="?&p=9" data-target="page" data-page="9">9</a>
    <a href="?&p=10" data-target="page" data-page="10">10</a>
    <a href="?&p=2" class="page-navigation-next"  data-page="2"> </a>
</div><!-- #page-navigation -->


<script type="text/x-handlebars-template" id="waterfall-tpl">
{{#result}}
    <div class="item">
       <img src="{{image}}" width="{{width}}" height="{{height}}" /> 
    </div>
{{/result}}
</script>
<script type="text/javascript">
    function removeIFrame() {
        var iframe = document.getElementById('popup');
var layer = document.getElementById('layer');
iframe.parentNode.removeChild(iframe);
layer.parentNode.removeChild(layer); 
    }
    </script>

<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/handlebars/handlebars.js"></script>
<script src="js/waterfall.min.js"></script>
<script>
$(window).load(function() {
$('#container').waterfall({
    itemCls: 'item',
    colWidth: 222,  
    gutterWidth: 15,
    gutterHeight: 15,
    maxPage: 5,
    checkImagesLoaded: false,
    callbacks: {

        loadingFinished: function($loading, isBeyondMaxPage) {
            if ( !isBeyondMaxPage ) {
                $loading.fadeOut();
            } else {
                $loading.hide();
                $('#page-navigation').show();
            }
        },
        renderData: function (data, dataType) {
            var tpl,
                template,
                resultNum = data.total;

            if ( resultNum < 20) {
                $('#container').waterfall('pause', function() {
                    //$('#waterfall-message').html('<p style="color:#666;">no more data...</p>')
                    //alert('no more data');
                });
            }

            if ( dataType === 'json' ||  dataType === 'jsonp'  ) { // json or jsonp format
                tpl = $('#waterfall-tpl').html();
                template = Handlebars.compile(tpl);

                return template(data);
            } else { // html format
                return data;
            }
        }
    },
    path: function(page) {
        return  'data/data1.php?page=' + page;
    }
});
});
</script>

    <!-- AddThis Button BEGIN -->
</div>

Data1.php

<?php
error_reporting(0);
$con = mysql_connect("localhost","mobileny_image","image123");
mysql_select_db('mobileny_image', $con);
$r = mysql_query("select * from images where status = 1 order by image_id desc");

$data = array();
$data1 = array();
while($row = mysql_fetch_array($r))
{
 $data['image'] = "http://shalva.in/image/gallery/".$row['image_name']; 
 $data['width']= 230;
 $data1[] = $data;  
}
$response['total'] = 10;
$response['result'] = $data1;   
echo $encoded = json_encode($response);

?>

一旦您進行第二次訪問，某種緩存就開始起作用，並且一切正常，但是由於某種原因，它無法正常工作

對像我這樣的小人有什么想法/幫助嗎？

Answer 1

在回調之前定義您的數據類型。

喜歡：

$('#container').waterfall({
   itemCls: 'item',
   colWidth: 222,  
   gutterWidth: 15,
   gutterHeight: 15,
   maxPage: 5,
   checkImagesLoaded: false,
   **dataType: 'html',**
   callbacks: {
      ...