i have a problem with carousel image banner slider. In first load my page is looks like this
Looks there are three consecutive images when i load page (those images should be banner slide). But after a moments (less than a second) three images are rendered in proper way. After a moment here is the view of web page
The problem is i want at first load web page i want a state looks like second image. Anyone know the problem ? i had just debugged via chrome debugger and nothing wrong with my javascript, could you give me any clue what is wrong with ?
Related
I am building a html5 js ionic mobile app. and short story is I cannot get my canvas to initialize the first image in a sequence on each view load. So each view is a task and each task has a set of images that I cycle through on click... My problem is that I'm trying to show the 1st image in each set before any clicks happen. So a case would be: a user chooses a task, navigates to that view and is presented with a canvas (blank at the moment, well sometimes this behavior miraculous works).
Each time the controller loads, I load the images for that specific task and then call an automatic load of the first image. Alas this is not working...
I have attached a link to show how the method where I believe she is braking -codepen...
$rootScope.getInitialScreen = function () {
I have not included a full example (would be too hectic to code a standalone version) but I have shown how the initial method is called on a loadImages() function, all images load perfectly so that is not where the error is, so I have just put the initialization code up.
Console.logging the image in the initialization function does show the correct image, it simply is not rendering onto my canvas... I've tried sizing of image, position of image, image itself and nothing.. Any ideas I would be super grateful!
Thanks.
I have developed an App using PhoneGap and JqueryMobile.
I have many HTML Pages , navigation from One page to other page on click of the image is taking lot of time.And the end user have no clue what is happening at the back end.
I would like to show loading image until the page gets loaded.
I'm wondering how could I use Jquery to show a simple "Loading..." on the screen until page is loaded.
Please help me on this.
With jquerymobile you can do this with $.mobile.showPageLoadingMsg() resp. $.mobile.hidePageLoadingMsg() as described in the documentation.
In my scenario, I'm linking to fairly large images (both in dimensions and filesize). It's understandable that fancybox will have to load for a few seconds before displaying them. The problem is that the loading animation is not showing up, so when the user clicks the thumbnail, it gives the impression that nothing is happening. Fancybox eventually comes up a few seconds later.
There is a secondary issue, also. The images are set to display as a gallery, via the "rel" attribute. Even when the user is viewing one image, browsing to the next takes a while (again, due to filesize), but because the throbber is not showing up, it seems like the prev/next buttons are not working. Any ideas?
I should add that I'm using fancybox v2.
My code (after including the necessary css and scripts for fancybox and the buttons helper, of course): http://pastebin.com/u3g8U8FS
Updating to the latest version (2.0.6) did the trick.
Make sure that the fancybox_loading.gif as well as the fancybox_sprite.png files are in the same folder as the jquery.fancybox.css file
I have a web app which displays a Java Script image carousel.
Showing one image at a time for n seconds.
When the html page (index.html) loads it loads all n images in an hidden parent html DIV and the app (JavaScript) is responsible for showing and hiding the parent divs for the images at a given interval.
This usually works fine, but some times (randomly) only half of the image is loaded (eg. just half of the image is displayed on the screen).
Sometimes only "half" of the index.html response is loaded making the HTML kode to bleed out to the display.
Unfortunatly I do not have any tools like Firebug etc. to debug the problem yet since the screen is a kiosk (screen hanging on the wall)
To me this seems like a network problem but I am no network administrator so I will just be guessing here.
As I said this happens randomly.
The image starts loading but only half of the image. Sometimes after maybe 15 seconds the rest of the image is suddenly displayed.
If this could be a network problem the what could it be?
Best regards,
bob
Sounds like it could be a network issue. Why not try and cache the images on the browser so you don't have to wait for them to load every time. Also try looking in the Firebug/Web Inspector Net panel and you should be able to see if the browser is waiting on a network response or not.
I've got a page with a lot of images (thumbnails). You should be able to expand the images via Lightbox. I need to encourage the browser to load the image in the Lightbox before any other image (thumbnail).
I remember some articles (I can't find anymore) on how to influence the loading mechanism of the browser (use a different subdomain to allow another thread), but I'd like to know whether there might be other options (i.e. without additional subdomains).
To clarify the issue:
Example (how I'd like it to behave)
I visit the page
I click on the 3rd picture thumbnail
The 3rd picture is shown (while the remaining thumbnails are loading)
Example (how it behaves right now)
I visit the page
I click on the 3rd picture thumbnail
A spinning wheel is shown until all thumbnails are loaded
The 3rd picture is shown
Are there any tutorials/papers/views on this issue?
Just did it with using jQuery $('<img>').attr('src', ...) in my custom queue-manager which limits the browser to load images 1-by-1 thus having the capacity to load additional images that might be showing up on the page (like the one in the lightbox).