[英]Image not load first time in webpage
Image not load when website load first time. 首次加载网站时无法加载图片。
URL: http://shalva.in/image/gallery.php 网址: http : //shalva.in/image/gallery.php
I am using json to get data. 我正在使用json获取数据。
Gallery.php 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 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);
?>
Once you make a second visit some kind of caching has hit in and it's- all working well, but for some reason it's not working as it should 一旦您进行第二次访问,某种缓存就开始起作用,并且一切正常,但是由于某种原因,它无法正常工作
Any ideas / help for a nub like me? 对像我这样的小人有什么想法/帮助吗?
Define your datatyp before Callback.. 在回调之前定义您的数据类型。
Like: 喜欢:
$('#container').waterfall({
itemCls: 'item',
colWidth: 222,
gutterWidth: 15,
gutterHeight: 15,
maxPage: 5,
checkImagesLoaded: false,
**dataType: 'html',**
callbacks: {
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.