In my HTML page I load about 40 images from the same domain (on page start up, all images load at same time). The problem is, sometimes some images don't show up, they're just a white box with a red X on the top left side. But if I try to refresh the page once (or a few times), that image then loads fine.
Does anyone know why this happens and how to ensure all images load fine?
This happens because the images aren't finished loading in time. You could try pre-loading them with javascript
What I would do is make sure the images are small (using thumbnails) so they will load. Then, load only a few at a time and load more as the page is scrolled or whenever the user requests more images.
See google images or pinterest for an example of how it would work. As you scroll the page, more images are loaded, as opposed to loading them all at once.
Related
I have a question about loading (hidden) images, only when they are visible in a lightbox sequence when loaded in HTML as a link.
This is my code:
<a href="../img/image_A_large" rel="lightbox[sequence_A]" data-title="© 2021">
<img src="../img/image_A_small.jpg">
<h2>Images</h2>
</a>
Basically, it loads an image (image_A_large) in a lightbox pop-up when the small one is clicked (image_A_small). Within this lightbox pop-up, one can navigate to other images which are loaded with a link, in order to add them to the current lightbox sequence (image_B, image_C, image_D, image_E, etc.).
However, all these images are loaded when accessing the site. But I want them only to load when they will be visible in the lightbox sequence (or when the lightbox sequence is opened in general, if the former is a bit too complicated). There are 12 of these similar sequences on 5 different pages, so it loads quite slow and also drains a lot of my available bandwidth.
Any ideas on how I can achieve this?
Cheers!
Can someone look at the image below and let me know what I seem to be doing wrong? On the first load, pictures show up like this but then if I refresh, then it resolves itself.
If I comment out the script, then everything shows up ok. If I add the script back in then it produces the result in the picture on the first load everytime
The answer to this is that there are about 3 images (full size) that are not loading. The reason is the capital .JPG and Chrome. Fixing the file name extenstions to .jpg will correct the issue as the image will load and the fancybox can do it's calculations to get the right heights.
Okay! So when a person click on the link that leads to the other page I want that the GIF. shows first for atleast 4 seconds and then the page. I dont want the GIF. loading when the page loads. Just... the gif. shows first then the page after 4 sec. I couldn't find a code anywhere about this part. Only about a gif loading before the page loads completely. I just want the gif first and only on the page showing then the page shows itself.
I tried many codes given on this site but this ain't it chief.
I'm working on a web project and I want to load my webpages with an even transition. What I get right now is my photos and background downloading in a curtain-like manner. I want it to show up when it is all loaded instantly.
I don't mind if there is a progress bar or something but not the curtain-like manner.
I used the prefetch/prerender html 5 tag but with no success..
visit here :
http://hellenic-jewls.com/
and then try to hover to another webpage to see that my images are downloaded progressively like a curtain :
e.g. http://hellenic-jewls.com/classical/
ofcourse when the webpages are cached it's ok.
HTML5 prerender/prefetch doesn't work that way. You use them to hint to the browser that you think that page will be visited next and should therefore be prerendered. There is no guarantee that this will happen though... it's up to the browser to decide if it wants to prerender the page.
Further, there will only be one page prerendered at any one time.
What you can do is hide your images, then use a script like https://github.com/desandro/imagesloaded to signal when the images are loaded, at which point you can show the images (with a fade-in transition if desired)
I have a screen with 2 UIWebView. The user can drag the views left and right to make the right and left view bigger (respectively) and the other one smaller (like UISplitView but customized and self made). I'm loading .html pages from strings and local .css files. After resizing the UIWebView If I load a new page there will be a black or white stripe on the right side of the UIWebView. This stripe is part of the web view (not a space between the views), and if I scroll the webView up and then down, the stripe will vanish and the page will be presented correctly. This issue occurs only in iOS 6 and only on the device (on the simulator it doesn't occur).
Some notes:
- The .css file contains elements with fixed position. Changing to absolute position didn't solve the problem but changed it: the black stripre occured during the drag.
- As slower the drag is, the stripe will be bigger.
- After resize the page is presented correctly, only when I load a new page the stripe is shown.
- The time between resizing the web view and loading a page doesn't matter, it can be straight away or after couple of minutes.
Now, as a workaround I create a new UIWebView and copy the old properties to the new. But than I need to reload the presented page which make a white blink...
Any idea why does it happens, and how to fix it?
sorry by the late feedback, but recently I was experimenting what appears to be the same problem.
I was using an UIWebView to show some text into a grid view. The "layout" of the grid view was different from portrait to landscape, and I was working with percents of the cell to build both (landscape and portrait) grid frames, in my case it makes the web view not to have an integer size.
It makes me thought that it can be some half-pixel issue after the web view resizing.