[英]Page layout breaks on page refresh using F5
I am using jQuery Wookmark
in my website ...everything works fine...but when i refresh the page the page layout breaks....why?? 我在我的网站上使用
jQuery Wookmark
...一切正常......但是当我刷新页面时页面布局中断....为什么?
Correct Layout 正确的布局
Wrong layout after page refresh using F5
使用
F5
刷新页面后布局错误
Why does this happen?? 为什么会这样? After page reload this happens...any idea why??
页面重新加载后发生这种情况......任何想法为什么?
JS JS
<script type="text/javascript" src="js/jquery.wookmark.js"></script>
<!-- Once the page is loaded, initalize the plug-in. -->
<script type="text/javascript">
var handler = null;
var pageIndex = 1;
var pageCount;
var isLoading = false;
var apiURL = 'Haggler.asmx/GetCategories'
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#tiles'), // Optional, used for some extra CSS styling
offset: 17, // Optional, the distance between grid items
itemWidth: 190 // Optional, the width of a grid item
};
/**
* When scrolled all the way to the bottom, add more tiles.
*/
function onScroll(event) {
// Only check when we're not still waiting for data.
if (!isLoading) {
// Check if we're within 100 pixels of the bottom edge of the broser window.
var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
if (closeToBottom) {
loadData();
}
}
};
/**
* Refreshes the layout.
*/
function applyLayout() {
// Clear our previous layout handler.
if (handler) handler.wookmarkClear();
// Create a new layout handler.
handler = $('#tiles li');
handler.wookmark(options);
};
/*
* Loads data from the API.
*/
function loadData() {
isLoading = true;
if (pageIndex == 1 || pageIndex <= pageCount) {
$('#loaderCircle').show();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: apiURL,
dataType: 'json',
data: '{pageIndex:' + pageIndex + '}', // Page parameter to make sure we load new data
success: function(data) {
//alert("SSS");
isLoading = false;
$('#loaderCircle').hide();
// Increment page index for future calls.
pageIndex++;
// Create HTML for the images.
var html = '';
pageCount = data.d[1].PageCount;
var i = 0, length = data.d.length, image;
//alert(JSON.stringify(data.d));
// image = data.d[1];
// alert(image.height);
for (; i < length; i++) {
image = data.d[i];
//alert(image.height);
html += '<li class="polaroid"><div class="optionbg"></div><div class="optionback"><span>' + data.d[i].NodeName + '</span></div><div class="options"><span class="favs">14</span><span class="fav">like it!</span></div><a href="http://www.google.co.in"><img src="' + image.image + '" width="180" height="' + Math.round(image.height / image.width * 180) + '"></a></li>';
}
// Add image HTML to the page.
$('#tiles').append(html);
// Apply layout.
applyLayout();
},
error: function(result) {
//alert(JSON.stringify(result));
}
});
}
};
/**
* Receives data from the API, creates HTML for images and updates the layout
*/
$(document).ready(new function() {
// Capture scroll event.
$(document).bind('scroll', onScroll);
// Load first data from the API.
loadData();
});
</script>
wrap you code inside 将代码包装在里面
$(document).ready(function () {
//your code
}
It calls your code every time your page reloads. 每次页面重新加载时,它都会调用您的代码。 Hope it helps.
希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.