I have a few Drupal websites that are using Maximage.js for my slideshows. One repeating issue I have is calling the javascript to work. If I use the traditional jQuery(document).ready(function($) everything works fine except for I.E. 8. The problem is, it seems that once the javascript for the slideshow loads, no other images load after that, so I'm left with a page that is missing background images as well as regular images.
To solve this I changed it to jQuery(window).load(function($) and that seemed to force everything to load before the slideshow.
My main issue with this method is it makes loading the homepage look funky..does anyone know Why this might be happening? or a better way to solve this problem.
Related
I've been struggling with this for a couple of days now. This is a Wordpress multi-site where one of the sites never stops loading and there are two functions that I am calling on $(window).load event but they never get triggered (Those are the rendering of the images on the viewport and the same for the ads)... if I use $(document).ready it will work but I wouldn't be solving the real issue as the page still shows as loading all the time event thought the content seems to be completely loaded.
This happens only on Firefox and I have tried in several computers... other browsers work fine.
I have read that this may be a problem with Javascript but there are a lot of Javascript resources I don't know where to begin. I have been looking around on the js resources but haven't found anything that could be causing this issue.
Any suggestions on how to find the root cause of this?
Here is a link for one of the pages with the issue:
http://www.motortrend.com/cars/toyota/rav4/2017/
I am using a JavaScript library to arrange few images on the webpage. The following browsers:
Firefox
IE 11
Microsoft edge
render the page as it was planned, the problem occurs with Chrome browser. It messes up the complete layout.
The above browsers don't load any content unless all the images have been downloaded, until then it shows a blank white screen, and all of a sudden it will show all the content rendered perfectly. And in case of Chrome, the browser displays content on the go, as in you can see the images appearing in a scanline fashion.
I've tried calling the function that arranges these images inside:
$(window).load(function() {})
and it didn't fix the issue, I tried calling this in the <head></head> and also just before closing </body>, that didn't fix it either. Is this a Chrome related issue?
What should be the correct point in time where the function should be called?
There is a nice library on the web with a comprehensive name imagesLoaded designed to fix your issue! It is supposed to work cross-browser of course, so no differences in behaviour in Chrome or other browsers.
With its help, you can run your code at the moment when all images loaded in specific DOM element or elements controlled by jQuery selector. Like:
$('body').imagesLoaded( function() {
// images have loaded
});
There are also .done, .fail, .progress callbacks supported if you need, so check the docs.
In some cases you have to wait until the image loads to get a parameter not specified in the <img> tag, such as height for example. Then you may use $(window).load
In other cases, for example, adding some classes to the images, you can do it before the image load.
If you want to load the images after the page loads completely or when the user really scroll and see each image, Lazy Load is a good plugin and it support callbacks.
Images should load First as hidden, Then your script should run like
$(document).ready(function(){
// here do the scripting may be showing them one by one
});
If you go to http://sandkasse.shoporama.dk/, you will see a bxslide at the top of the page. at least, you will if you do not use chrome (Peculiarly, the problem seems not to occur in safari, IE or firefox).
I am experiencing the problem that quite often when loading the page from chrome, the images to be used in the bxslider do no load. refreshing usually solves the problem. All I get is the two buttons for switching slides, however nothing happens when these are clicked.
I don't get any error messages.
I am assuming that the problem is that the images have not finished loading when the $('.bxslider').bxSlider(); is called inside the $(document).ready(function(){}).
However, what is a good fix to this? if I move the bxslider call to window.load, I get the somewhat ugly result that all the images in the slide are shown until the whole page has finished loading, with the wrong width and styling. I suppose I could change the visibility and styling of all the images until the page finishes loading, but this seems more like a hack than a solution?
would it be a sensible choice to use some sort of imagesloaded event instead of document.ready? the imagesloaded package is included anyway. but, I suspect I would run into the same problem of all images showing until the last had loaded?
A related problem may be the fact that the slider always skips to the last slide when the page is loaded, irrespective of which browser is used. I have "fixed" this by setting the "startSlide" manually.
I hope my question makes sense. I am aware that there are a lot of bxslider questions on here, but I haven't been able to find anyone solving this particular problem, except for people "giving up" and resorting to just hiding the images while things load?
I may have come up with a suitably non-hacky solution:
reload the slider in the window.load call. Thus, my bxslider call has transformed into:
var slider; // has to be defined beforehand so I can use it in window.load
$(document).ready(function(){
//initialize slider
slider = $('.bxslider').bxSlider({
startSlide:0
});
};)
$(window).load(function() {
slider.reloadSlider();
});
I've had this problem for over a month and client isn't paying me until it's fixed.
The website is: http://www.cardwells.co.nz
I'm using WordPress as the CMS with a template and some custom work.
The template comes with a slider background inbuilt which works in all browsers except IE.
I'm also using http://www.smoothdivscroll.com/clickableLogoParade.html for the scroller at the bottom.
Basically I have no clue WHY it's not working in IE - everything seems like it should be working. I've run the site through w3 checker and used that IE specific CSS files - but no dice.
Please help.
There was no real solution - really =\ I disabled, removed, reuploaded and reenabled the template. Either a file was a miss or a DB connection error somewhere along the line. So stupid.
Iam working on a website and I dont have any clue why the tabs doesnt work when I upload the website. Because when I view the website normal it does work perfectly.
By the way: The tabs are working with a jquery script.
This is the website URL: http://bmvisuals.poshh.nl/
Greetings.
Edit: I mean some of the tabs doesnt appear.
Your About me tab does not show up because your server is case sensitive.
Aboutme.jpg != Aboutme.JPG
You should check out CSS Sprites. There is a flicker when you hover over a tab (the first time) because the browser has to load the hover image. With CSS Sprites an image map is used and all the images are loaded at once so the hover is seamless.
As an aside, your site does not scroll vertically. When my window is smaller than your site, the bottom gets cut off and there is no way for me to see it.
Firstly, nice site. Secondly your tabs are totally borked for me. I am using Linux Ubuntu and Firefox 3. Not sure about the fix though. Just thought I would mention it.
Using Firebug, I see some resources give a 404 error:
http://bmvisuals.poshh.nl/Scripts/Lightbox/images/lightbox-ico-loading.gif
http://bmvisuals.poshh.nl/Scripts/Images/PhotoGallery/PhotoGalleryContainerBackground.png
http://bmvisuals.poshh.nl/Images/Tabs/Aboutme.jpg
http://bmvisuals.poshh.nl/Images/Tabs/HomeActive.png
On a side note, the page doesn't work if javascript is disabled. I would suggest using the noscript tag to show a message saying javascript is required. The other option is to make the page work without javascript.