Instantclick (Pjax). How do pages load + reload Masonry.js?
InstantClick uses pushState and Ajax. On the main page of the Jekyll blog (full statics), I use Masonry.js, it is worth the preload:
var $grid = $('.grid').imagesLoaded(function ()
$grid.masonry(
percentPosition: true
itemSelector: '.item',
columnWidth: '.item',
horizontalOrder: true,
);
);
Which also does not quite work correctly, masonry whatever makes some update of its structure (3 columns).
The point is that when you click on different links, instantClick changes the body using Pjax. The download page is instant, when browsing with the browser arrows, there is a display of already completed "passed" pages (ala HTML 5 History, I don't know) where there is no update and everything is fine. But of course, when going to the main page (as well as to any other page), clicking on the link again will change the body.
Question: how to click on the already "passed" pages, download them, as in the transition arrows of the browser (History HTML 5), without new old pages loading ? This would solve all the problems, except for the initial loading of masonry on the main one.
Put (see the documentation) a script for an additional preload of the tile (for without it, when how, but the tile is reset): (the script must be in front of the main InstantClick.init();
InstantClick.on('change', function ()
$grid.masonry();
);
javascript ajax jquery-masonry html5-history pjax
asked Nov 14 '18 at 17:48
PredaytorPredaytor
164
add a comment |
InstantClick uses pushState and Ajax. On the main page of the Jekyll blog (full statics), I use Masonry.js, it is worth the preload:
var $grid = $('.grid').imagesLoaded(function ()
$grid.masonry(
percentPosition: true
itemSelector: '.item',
columnWidth: '.item',
horizontalOrder: true,
);
);
Which also does not quite work correctly, masonry whatever makes some update of its structure (3 columns).
The point is that when you click on different links, instantClick changes the body using Pjax. The download page is instant, when browsing with the browser arrows, there is a display of already completed "passed" pages (ala HTML 5 History, I don't know) where there is no update and everything is fine. But of course, when going to the main page (as well as to any other page), clicking on the link again will change the body.
Question: how to click on the already "passed" pages, download them, as in the transition arrows of the browser (History HTML 5), without new old pages loading ? This would solve all the problems, except for the initial loading of masonry on the main one.
Put (see the documentation) a script for an additional preload of the tile (for without it, when how, but the tile is reset): (the script must be in front of the main InstantClick.init();
InstantClick.on('change', function ()
$grid.masonry();
);
javascript ajax jquery-masonry html5-history pjax
asked Nov 14 '18 at 17:48
PredaytorPredaytor
164
add a comment |
InstantClick uses pushState and Ajax. On the main page of the Jekyll blog (full statics), I use Masonry.js, it is worth the preload:
var $grid = $('.grid').imagesLoaded(function ()
$grid.masonry(
percentPosition: true
itemSelector: '.item',
columnWidth: '.item',
horizontalOrder: true,
);
);
Which also does not quite work correctly, masonry whatever makes some update of its structure (3 columns).
The point is that when you click on different links, instantClick changes the body using Pjax. The download page is instant, when browsing with the browser arrows, there is a display of already completed "passed" pages (ala HTML 5 History, I don't know) where there is no update and everything is fine. But of course, when going to the main page (as well as to any other page), clicking on the link again will change the body.
Question: how to click on the already "passed" pages, download them, as in the transition arrows of the browser (History HTML 5), without new old pages loading ? This would solve all the problems, except for the initial loading of masonry on the main one.
Put (see the documentation) a script for an additional preload of the tile (for without it, when how, but the tile is reset): (the script must be in front of the main InstantClick.init();
InstantClick.on('change', function ()
$grid.masonry();
);
javascript ajax jquery-masonry html5-history pjax
asked Nov 14 '18 at 17:48
PredaytorPredaytor
164
InstantClick uses pushState and Ajax. On the main page of the Jekyll blog (full statics), I use Masonry.js, it is worth the preload:
var $grid = $('.grid').imagesLoaded(function ()
$grid.masonry(
percentPosition: true
itemSelector: '.item',
columnWidth: '.item',
horizontalOrder: true,
);
);
Which also does not quite work correctly, masonry whatever makes some update of its structure (3 columns).
The point is that when you click on different links, instantClick changes the body using Pjax. The download page is instant, when browsing with the browser arrows, there is a display of already completed "passed" pages (ala HTML 5 History, I don't know) where there is no update and everything is fine. But of course, when going to the main page (as well as to any other page), clicking on the link again will change the body.
Question: how to click on the already "passed" pages, download them, as in the transition arrows of the browser (History HTML 5), without new old pages loading ? This would solve all the problems, except for the initial loading of masonry on the main one.
Put (see the documentation) a script for an additional preload of the tile (for without it, when how, but the tile is reset): (the script must be in front of the main InstantClick.init();
InstantClick.on('change', function ()
$grid.masonry();
);
javascript ajax jquery-masonry html5-history pjax
javascript ajax jquery-masonry html5-history pjax
asked Nov 14 '18 at 17:48
PredaytorPredaytor
164
asked Nov 14 '18 at 17:48
PredaytorPredaytor
164
edited Nov 14 '18 at 18:49
Predaytor
asked Nov 14 '18 at 17:48
PredaytorPredaytor
164
asked Nov 14 '18 at 17:48
PredaytorPredaytor
164
asked Nov 14 '18 at 17:48
PredaytorPredaytor
164
164
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306061%2finstantclick-pjax-how-do-pages-load-reload-masonry-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306061%2finstantclick-pjax-how-do-pages-load-reload-masonry-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
