I'm trying to use lazyload to only load images that are visible (because my site is responsive and some content is hidden with display:none to clients on a smaller screen).
Basically, lazyload works, but ONLY after I scroll the page a little.
This is the lazy load settings I'm using, and even after setting the threshold to 2000px (more than the entire page height) it still only loads images after the user scrolls the page (even 1 px).
This bug only appears in webkit browsers.
$(document).ready(function () {
$("img").lazyload({threshold : "2000", effect : "fadeIn", effectspeed: 2000,});
});
I think it could be some misbehavior of threshold parameter, but still you can manually fire the loading according to this page:
<script type="text/javascript">
$(document).ready(function () {
$("img")
.lazyload({
event: "lazyload",
effect: "fadeIn",
effectspeed: 2000
})
.trigger("lazyload");
});
</script>
but if you want to load all images on ready, why need lazyload at all? You could just use $.animate.
Just add this after .lazyload() and it will trigger scroll and show images
$(window).trigger('scroll');
You need to set width and height for you images.
If width and height are not set jQuery will report images invisible in Webkit browsers on document.load event. When skip_invisible is true Lazy Load will ignore the images, meaning it wont try to figure out whether image should be loaded or not. They will load first time you scroll.
If you set skip_invisible is false plugin will try to figure out should images be loaded. However since you do not have width and height set all images will be size of 0x0 or 1x1. Because of this all images are in viewport (because of their size) when plugin kicks in. Because images are in viewport Lazy Load will instruct to load them all.
In short: Add width and height to images. Lazy Load wont work properly without them.
I'm not sure when this got added, but you can manually fire the 'appear' event to some or all (depending on the css selector) appear:
$("img.lazy").trigger('appear');
Got this from here: http://yuji.wordpress.com/2014/05/14/force-jquery-lazyload-to-appear/
I had the same issue. They are in a scrolling div, but would only load after an initial scroll.
Using 'appear' will show them all, unless you limit it. In my case, I only wanted to show the first 3 on load. The rest of them lazy load as usual.
$("img.lazy:lt(3)").trigger('appear');
Try to pass additional parameter.
skip_invisible : false
This parameter is true by default, so it seems your images are not visible when plugin starts it's job. It could happens when you are using any preloader on your website.
I had the same problem, and found a solution for this.
Please note that my images were placed inside of a div that is populated via an ajax call.
Just change a line of code inside the lazyload sources (lines 147-150) of version 1.8.4:
/* Force initial check if images should appear. */
$(document).ready(function() {
update();
});
instead of
/* Force initial check if images should appear. */
$(window).load(function() {
update();
});
Or eventually add the call to "update()" to any other needed event.
I had a similar issue where the images wouldn't load after a ajax call until I scrolled (even if I just scrolled 1px it would load). I found I needed to add a height and width to my images like Mika Tuupola said. My images were loaded dynamically, were different image sizes and loaded from a foreach loop. I added generic width and height attribute to the image tag then after the lazyload loads the image I removed the attributes so it would show the correct image size.
<img class="lazy" src="img/placeholder.gif" data-original="img/image.gif" width="1000" height="600">
$('img.lazy').lazyload({
skip_invisible: false
}).removeClass('lazy').removeAttr('width').removeAttr('height');
I had the same problem with hidden elements, is a simple workaround but it works. When I click on the page, I triggering scroll event to force lazyload script. You can do the same thing with the event resize
$(document).ready(function () {
$("img").lazyload({
event: "lazyload",
effect: "fadeIn",
effectspeed: 2000
});
$(window).resize(function () {
$(this).trigger("scroll");
});
});
In short: Add width and height to images. Lazy Load wont work properly without them.
You should be loaded in advance placeholder;Like this：
<img src="./images/grey.gif" alt="" style="display:none">
And then
$("img.lazy").lazyload({placeholder : "images/grey.gif"});
If you set the width of the image to 100%,this will provide a width and height.
This solved my problem.
This is working solution, but in is not very good for some reason:
$("img").lazyload({
/* Image loaded callback function */
load: function() {
$(window).trigger('scroll');
}
});
Every time lazyload plugin load the picture, this function will be called and window trigger 'scroll' will be emulated, so it is a solution for me
Increase the failure_limit.
After scrolling page plugin loops though unloaded images. Loop checks if image has become visible. By default loop is stopped when first image outside viewport 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.
Setting failure_limit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold.
I was dealing with the same issue and I noticed that this problem only occurs when images are placed inside a div that is initially hidden (ie. display: none;)
Related
What is the difference between:
$(window).load(function() {
loadSlideShow();
});
and
window.addEventListener('load',loadSlideShow());
The function loadSlideShow() creates a slideshow; it waits for all of the images to load, and then adds the controls to the slideshow, in the middle of the image (it bases the position of the controls on the height of the image).
When using window.addEventListener, the controls would sometimes be added before the image had actually loaded. So the image height would be 0 and the controls would be placed at the very top of the slideshow, and not in the middle.
Once I changed to $(window).load, the error went away.
I'm not sure why there would be a difference between the two.
This code is implemented wrong which will make a difference:
window.addEventListener('load',loadSlideShow());
It should be:
window.addEventListener('load',loadSlideShow);
The way you were doing it would call loadSlideShow() immediately without waiting for the event. The corrected way will operate the same as your jQuery version.
I try to use the Fluidbox script with the bootstrap tab plugin. When I click on a tab, new images appear. They are in a container and the opacity goes from 0 to 1.
By default the first container opacity is set to 1.
Fluidbox works well with that container but not with the other. I suspect that it has a link with opacity change. Any ideas?
Page with the problem: http://urlgone.com/2d0035/
It seems Fluidbox does not work on any images that are set to display none. And in your case inside of a parent element that is set to display none.
The way you get around this is to get fluidbox to fire before the image or element is hidden. I was using easytabs, so I placed it's call inside of a window load function which gave fluidbox enough time to fire before easytabs hid the photos.
$(window).load(function() {
$("#tab-full-container").easytabs();
});
When I affix my navbar element, which is below my header element, the navbar affixes prematurely, as if the image in the header did not exist.
The navbar is supposed to affix when the navbar reaches the top, not earlier. The code I used for this sets the offset to the scroll position of the navbar, but the problem is, this position is calculated as if the image in the header didn't exist.
I tried putting p tags around the image, explicitly set the image height to a fixed height as well as auto, set the display property to every conceivable value with no avail. I am not floating my image in the header. When I put extra lines of text in the header, the nav affixes to that height (the offset height of the navbar's affix detects the height of the text, but not images).
*edit: the fiddle works fine (this is the desired behavior).
http://jsfiddle.net/gwho/8sAYW/
(this fiddle isn't exhibiting the problematic behavior for some reason).
the JS in coffeescript
ready = ->
$('.affixable').affix({
offset: { top: $('.affixable').offset().top }
});
$('nav').height($('.affixable').height());
$(document).ready(ready);
$(document).on('page:load', ready);
**edit: but my local host behaves differently, as shown in the screenshot.
I think the issue may be that images are loaded last (before the navbar partial) in rails's asset pipeline... and the offset position of the navbar in the js code is calculated before the image is rendered... whereas in the JS fiddle, it doesn't have this issue.
If/how should I hold off running the javascript code, so that it runs after all the images are loaded?
Solution!
The issue was that the javascript was running before the images were loaded (thereby resulting in an offset positioning that got calculated before the image was present). The solution was to load the javascript after everything else had been loaded by changing the last two lines of my coffee script:
ready = ->
$('.affixable').affix({
offset: { top: $('.affixable').offset().top }
});
$('nav').height($('.affixable').height());
$(document).ready(ready);
$(document).on('page:load', ready);
to
ready = ->
$('.affixable').affix({
offset: { top: $('.affixable').offset().top }
});
$('nav').height($('.affixable').height());
$(window).load(ready);
$(window).on('page:load', ready);
I don't know if this will happen on heroku, or other servers, but it sure helps to ensure it won't by using the latter code instead.
I have this very simple function to resize a div according to an element on the page.
Because of the static navigation bar on top of the page, I need to control the empty space underneath it, for the first div with content to appear on the right place (below the navigation bar), specially because when the screen is smaller, the navigation bar gets larger (height is bigger).
My question is: why does it not always work? It works fine most of the times, but sometimes I need to refresh the page for it to work.
Here is the dummy HTML:
<div id="menu-fixed-top"></div>
<div id="empty-space"></div>
<div id="content"></div>
where the #empty-space is the div I want to control the height.
I used the document.ready and the window.resize to control it.
The JQuery function is:
$(document).ready(function() {
var height = $("#menu-fixed-top").innerHeight();
$("#empty-space").height( height );
$(window).resize(function() {
$("#empty-space").height( height );
});
});
Is there any way to get it working 100% of the time? Or the only way is to be sure is to use media queries?
Thanks
document.ready will trigger when the whole DOM has loaded and is ready for javascript to execute. This is to avoid any problems with javascript being ready to go but the whole DOM hasn't finished loading.
http://learn.jquery.com/using-jquery-core/document-ready/
I would first check to see that the DOM has finished loading without document.ready being triggered before drawing the conclusion that jquery isn't kicking it off.
You may also want to look at window.load if you're wanting to calculate heights and such as the DOM != the fully rendered page
I'm using the following code:
$("#galleries").load("letters/index.php");
$(function(){
$('#galleries').hide().fadeIn(1500);
});
everything works fine. My problem is, I got about 8 scripts like that, and whenever I switch the content of the div, it doesn't do that smoothly, first of all, it clears the DIV and let me see that for about 0.7 seconds, after that, it loads ALL of the content within a second, and it's really disturbing my eye.
I thought about a solution, that I will get the height of the page I wanna load, and then set the DIV height to that height, and then load the info. Will it work? because, the LOAD function removes everything from the div, will it remove the height property as well?
generally, this is what im trying to achieve:
//GET TARGET'S HEIGHT
//SET #galleries TO THAT HEIGHT
$("#galleries").load("letters/index.php");
$(function(){
$('#galleries').hide().fadeIn(1500);
});
I don't know how to get the target's height and set it. But anyways, will it work? or maybe someone has another solution for me?
Thanks in advance!
You aren't using the complete callback of load() which allows you to run code after content is loaded.
Try something like this:
$(function(){
/* hide first, then load*/
$('#galleries').hide().load("letters/index.php", function(){
/* new content now exists*/
$(this).slideDown()/* or fadeIn() or any other effect*/
});
});
SlideDown is not dependent on overall height so will smoothly move content below it down