I'm using the ACF gallery field to add images into a custom post type. The problem is that in the case of one post I've added around 80 images which means that they all have to load before Masonry is triggered. I thought I'd use lazy load to load the images in as you scroll down the page but that requires for you to know the image dimensions.
I found this https://github.com/okadots/masonry-wp-lazy-load but it turns out that it isn't very secure.
Anybody have any other ideas?
You can use something like imagesLoaded (which is made by the creator of Masonry) to make sure all images are loaded before triggering Masonry.
imagesLoaded in Masonry documentation: http://masonry.desandro.com/appendix.html#imagesloaded
You can use the imagesLoaded plugin, found here: http://imagesloaded.desandro.com/ then each time an image gets loaded you can refresh the layout of the grid, it will look like this:
// init Masonry
var $grid = $('.grid').masonry({
// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
each time you add more items to the grid, probably via AJAX, you'll need to execute the lines where you layout masonry
if you are having a hard time with this you can use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 with this plugin you can have lazy load, you only specify the URLS of your images and the plugin will do the rest, you can configure how many images you want to load on each set
Related
I have an Aurelia app where a user can click on a button and create a new tab. The tab and its content (a custom element) do not exist on the page before the user clicks the button. I am generating the HTML for the content at runtime (via Javascript) in my view model.
I keep seeing mention of using the template engine's compose or enhance functions, but neither are working for me. I don't know how I would use the <compose> element (in my HTML) since I am creating the element based on the user clicking a button.
My thought was that the button has a click.delegate to a function that does ultimately does something like
const customElement = document.createElement('custom-element');
parentElement.appendChild(customElement);
const view = this.templatingEngine.enhance({
element : customElement,
container : this.container, // injected
resources : this.viewResources, // injected
bindingContext: {
attrOne: this.foo,
attrTwo: this.bar,
}
});
view.attached();
But all this does is create an HTML element <custom-element></custom-element> without actually binding any attributes to it.
How can I create a custom element analogous to <custom-element attr-one.bind="foo" attr-two.bind="bar"></custom-element> but via Javascript?
As you pointed out in your own answer, it's the missing resources that caused the issue. One solution is to register it globally. That is not always the desired behavior though, as sometimes you want to lazily load the resources and enhance some lazy piece of HTML. Enhance API accepts an option for the resources that you want to compile the view with. So you can do this:
.enhance({
resources: new ViewResources(myGlobalResources) // alter the view resources here
})
for the view resources, if you want to get it from a particular custom element, you can hook into the created lifecycle and get it, or you can inject the container and retrieve it via container.get(ViewResources)
I found the problem =\ I had to make my custom element a global resource.
I am using the vue-masonry plugin which let me create a masonry grid easily.
I created a system of infinite loading where you scroll to the bottom of the page and it append new pictures to an array binded with the vue-masonry plugin.
The problem happen when I created a system of polling for the new pictures that were upoaded by other users. Those new pictures need to be at the top of the masonry grid.
The plugin use two Vue Directive masonry (parent) and masonryTile (element). masonryTile has a v-for which loop through the array binded with my Vue instance (which does all the heavy lifting, preloading, sanityzing, etc...).
Is there a way in the directives to know the differences between something being appended or prepended? And try to react differently (I know masonry has some append/prepend method) but in here and with this plugin, the items where already added (at the beginning so the prepend works with Vue) but there's no masonry interaction nor redraw (I tried to use the prototype to trigger the redraw this.$redrawVueMasonry();).
So I don't know what's next to do. Continue finding a way to differentiate a prepend from a append and trying to bind it to the respective masonry's methods ? Or another method that I didn't think of...
Thanks in advance for you help
Ps : I don't think my code is really relevant since It's more a way to optimize the plugin. If you want some specific part of my code anymay, tell me in the comment !
This probably comes a bit too late, this being a 10 month old question.
However vue-masonry is able to handle situations where items are spliced anywhere in the array. But to properly update the grid this.$redrawVueMasonry() should be called inside this.$nextTick() like this:
this.$nextTick(() => this.$redrawVueMasonry());
Hope this helps, if not the original poster, someone else.
When I add nodes to the graph statically via the elements property of
$('#cy').cytoscape(..)
the layout option works but when I add them via
cy.add({..})
the layout is ignored. I can apply new layout only on these events(click, mouseover, mouseout) like this:
cy.on('mouseover', function(event) {
cy.layout({name: "grid"});
});
and the layout changes. Tried with other events: ready, done and load but it doesn't work.
Is there a normal way way to change the layout when elements are added dynamically?
You can't call a second layout while the initialisation layout is running. Configure your initialisation properly (http://cytoscape.github.io/cytoscape.js/#core/initialisation) to have all the data and options you require.
As for cy.add(): Don't try using cy.add() on load unless you specify everything you need (incl. position) for those elements. Or, you'll have to at least wait for layoutstop before running a new layout. In general, you're better off using the initialisation options to do things for you rather than having to worry about edge cases and event synchronising yourself.
I've been using Durandal for a landing page of sorts, and using it to populate the main content of a page (#applicationHost, red area below). It works, but page rendering speed is an issue (requirejs, ajax calls, composition, etc)
Since we have the content data already, we were considering rendering the page content server-side.
However we would still like to use Durandal on this page to allow hash-routing to other views, trigger Durandal dialogs, and to data-bind some observables that can be loaded asynchronously. (areas in green below)
Problem is I don't want to replace #applicationHost content (red above) immediately when starting Durandal on this landing page. For hash-routing to other views, I would like to replace or hide it.
Not sure exactly what you're asking, but it sounds like this might solve at least part of the problem.
You can use 'promises' to enforce a minimum delay between the splash screen loading and your app doing whatever startup it needs to do. Assuming a common setup where your Durandal main.js loads shell.js on startup, return a combined promise from the shell.js 'activate' callback. I recommend using the Q library for promises (Q + Durandal docs).
shell.js would contain something like the following. The logic below causes the splash screen to be displayed for at least 3 seconds. Longer if initializeAppPromise takes longer than 3 seconds:
in shell.js...
activate = function(){
var initializeAppPromise = router.map(....)..etc...activate();
var minimumDelayPromise = Q.delay(3000); //give splash animation/whatever time to display
return Q.all([initializeAppPromise, minimumDelayPromise ])
.spread(function(routerActivationResponse){
return routerActivationResponse;
});
}
Came up with a decent solution for this, hope it helps others:
https://github.com/bestguy/durandal-delayed-composition
I am now trying to implement lazyload onto my website.
I have successfully got lazy load working on pages that have a static gallery.
The main portfolio of the website has a large list of images that can be filtered using the javascript library Isotope.
The lazy load works fine when filtering is not in used, however, if the page loads and I don't scroll, but filtering is used, the items which are brought into view don't resolve. I found that occasional images worked, but most don't.
Any suggestions on how to fix this?
Presumably i need to be able to do something that will re-trigger lazy load to refresh or recheck itself?
Here is the gallery I am trying to get working, where you can see the issues I am having: http://www.imageworkshop.com/lazyload-portfolio/
Anyone able to help?
call this code on filtered item is clicked: $(window).trigger('scroll');
I found this answer from acarabott - https://stackoverflow.com/a/13919010/735369
I have implemented this and this has worked.
The only issue is that the refresh doesn't happen until a scroll action takes place.
If you want to use isotope's sorting/filtering functions, you will need to set the failure_limit of lazyload and trigger the event with isotope's onLayout callback.
jQuery(document).ready(function($) {
var $win = $(window),
$con = $('#container'),
$imgs = $("img.lazy");
$con.isotope({
onLayout: function() {
$win.trigger("scroll");
}
});
$imgs.lazyload({
failure_limit: Math.max($imgs.length - 1, 0)
});
Explanation
According to the docs ( http://www.appelsiini.net/projects/lazyload )
After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.
With an isotope sorted/filtered list, the page order is certainly different from the HTML so we need to adjust our failure_limit.
As you can see we store the jQuery object so that we can use its length-1 as our failure_limit. If you're curious as to why it is length-1, it's because of the following check in lazyload's update method.
if (++counter > settings.failure_limit) {
return false;
}
Lazy load on other events
If you are not triggering your lazyloads on scroll, you will need to swap the "scroll" trigger for whichever event you are using.
Demo
http://jsfiddle.net/arthurc/ZnEhn/