I'm using lazyload (JS library) and it works great! I have a long page with images where I use lazyload and, if I scroll down, it works perfectly.
The problem comes when I press a button that hide some divs on the top and the page goes up, with all the images. Lazyload doesn't load the images that rise the user view.
How could I solve this? I would need something to notify lazyload "please, load the images that are now in the user area view".
Thanks!
If you're using verlok's lazyload library, it is really simple: all you need is to inform the plugin that the layout of the page has changed (or the page content has been reflowed). This can be done by calling:
var myLazyLoad = new LazyLoad();
// After your content has changed...
myLazyLoad.update();
...which will manually update the instance. In your case, you will need to invoke myLazyLoad.update() when the button is pressed: how that is implemented is really up to you.
See the API documentation here: https://github.com/verlok/lazyload#dynamic-content
Related
I have a very strange problem that I really don't know how to solve.
When I'm on my mobile, my page loads as follows homepage
But when you click on the screen all the components appear.
Can I generate a fake click on my mobile or something?
I really have no idea what's going on
I would also check how the scripts load, I have nothing to do with async defer
Do you think that a fake click would solve me?
For example, when it loads its page to click / touch on the mobile?
You have to selected an element and then you can call click()
document.getElementById('yourelement').click()
This should go on your mounted() default layout.
i have website with 200 post and each one have +50 pictures without text content and that slow down the loading of my website .. i want to split the loading of picture using a button when the user click on it will be loaded more 10 picture and so on till the end and i don't know how to add the js function to the word-press
i found some plugin but split to many pagy with <--next page -->
but i need some thing like that to keep the user in the some page
"Lazy Loading" might be able to do what you need, although not exactly what you would like to do with a button and javascript. It is an optimization technique that only loads a picture when it's visible on the area of the browser, and delay loading the rest of the pictures until you scroll down or when they should become visible.
You can configure that when a page loads, only the pictures that are "Above the Fold" (printed on the top half of a browser without scrolling down) should load, and delay loading the rest until a user scrolls down to reveal them.
You can check this document How to Implement WordPress Lazy Load on Images and Videos.
Check out these lazy load plugins:
https://wpneon.com/best-wordpress-lazy-load-plugins/
I am trying to create a loading icon which triggers on a code behind function (Button click) the function redirects to another page. I am trying to find a way of having a loading icon appear on the button click and go away when the second page is loaded.
I have tried using Jquery by hiding the loading icon on page ready using the following function
$('#LoadingIcon').hide()
... in the document ready function.
However the icon doesn't appear until the page is already halfway through its loading process.
Any guidance on how I could solve this would be greatly appreciated.
Please use the following link which may help you to do this. There's a way to do it using a bit of JavaScript.
http://blog.ysatech.com/post/2010/02/06/ASPNET-redirect-a-web-page-with-AJAX-loading-indicator-image
I have a media query that works well, except, when user resize window, the images on the jQuery slider dont resize, until the user manually refreshes the page. I am getting that the slider(http://bxslider.com/) gets the window size when page is rendered and not on the fly. Anyone experienced same thing before?
All help will be appreciated.
Well since you're using jQuery you can check for the window being resized and then reload the slider.
The event hook is:
window.onresize = function(event) {
//Now reload your slider from the link in your post it seems like it's:
$('.bxslider').bxSlider();
}
i have a page on a website that is a giant list of logos. i only want to load the first 12 logos, and load 12 more when the user gets to the bottom of the page. i've seen this done all over the place, but i'm trying to figure out how to do it.
i don't want to load all the logos at once and then hide most of them, because the user is still going to have to wait for them to load...
currently all my images are in the same document, and they are each in their own div (such as #loadContent1, #loadContent2, etc). what is the best way to accomplish this feature?
thanks
There is a jQuery Plugin that called Lazy Load that can maybe assist you.
Lazy Load