I have searched for a couple hours on this topic, to no avail. When I view my site on mobile via Safari, sometimes pieces of the background image are missing. For instance, everything will look great, but then there will be a chunk missing in the middle. Or, perhaps instead there will be a chunk missing from the bottom. It appears to be random. Then, if I turn the phone, the missing piece fills in and even if I turn it back to portrait mode, the piece has filled in.
Any ideas as to why a section of an image won’t load? Could it be that the image is too big? Just looking for some ideas to get started with. Unfortunately, I haven’t come across this problem in my searches. Thanks.
Images should not be missing chunks. If it is a JPEG image, there is the tiny possibility your image is being corrupted in transit. Is the image being created dynamically?
But the most likely cause is that you have some html element over the top of the image that is opaque - and preventing the underlying image from being displayed.
Related
Whenever I upload an image to my website, it makes the image a little larger than the original file has it at, plus the quality goes down as if it's zooming in or something. I tell it in the html code what the correct image size is like this:
img src="_images/podcast/120913_slider.png" width="851" height="323" alt="News1"
So the correct sizing should show, I'm not trying to change the dimensions or anything in the code. When I save the file and look at the picture, everything looks alright. But once it's in the site, it changes and I can't figure out why.
Here are two pages I'm currently working on where I see this. In the news slider on the main page, it's very clear that quality has been lost for the Christmas Novella news picture, which is obviously a problem for me.
http://thehummingbirdplace.com/
http://thehummingbirdplace.com/episode/12/9.html
I've also tried downloading the image again from the site (the "save image as" option) but it looks the same as the original image I had (smaller and high quality), so I don't understand why it displays differently on the page. I'm using Firefox, and I definitely do not have the page zoomed in or anything, I've checked. And I don't see this happening on other websites I visit, just mine, and on multiple computers, so I know there is something I must be doing wrong in the code?
I'm sorry if there is an obvious solution to this, thank you for helping!!
Update: the images show up fine in Chrome, just not Firefox it seems
According to your link, the image on the website is exactly the image that is linked (and not resized), I can't see any difference between those. Are you sure you are exporting your images at this resolution: 851x323 ?
I'm using haxe and openfl to create an html5 application. I tested the app in multiple browsers and devices, all work fine except in Chrome on iOS 7 only. The images used are not appearing seemingly randomly. Every time I re load different images appear and others disappear with exception to a couple that are always there. Here is what I tried:
I tried setting the z-index on the canvas that is used for one of the missing images, as well as a bigger width and height.
I know that the images are being loaded, I used Charles to take a look. There are no errors in the console log and changing the time and place where the images are being added to the display list in haxe changes nothing.
I swapped out one of the images that are always there for an image that is never there and it still didn't load.
The file names had a couple dashes and spaces in them so I changed that as well with no effect.
It's a very strange problem that I can't seem to diagnose. nor can I really find anyone with a similar problem.
The main issue is the fact that I can't see what haxe is building that might be causing this issue.
This is hard to answer without code samples. My advise is to look at what's different about the pictures that stay versus the ones that don't, both in how you're coding and the pictures themselves. I've had problems with images displaying correctly on ios only to find the problem was embedded somewhere in the metadata of an image. Hope this helps.
I was wondering what the best way to have a large HD image load on my website.
When simply using it as a background image, there is a delay and there is nothing on the screen for a about 5 seconds before it slowly slides down the screen.
I had an idea that maybe stacking multiple images on top of each other with increasing quality, so that at first you get bad quality, then when the HD is available and loaded, it is made visible on top of the bad quality image.
I guess really my question is, is this my only solution? Are there any better ways to do this?
Thanks.
Look into image interlacing.
It can supposedly do what you want, though I don't have experience with it myself.
It does seem to be the way Facebook works to me.
Also see this question on SO, as provided by janith in the comments below: Load an image via Interlacing - From low to full resolution - HTML
I'm building the landing page for our app, and i found some inconsistencies when opening up my page on google chrome. I designed the page to have the text be on the right side of the picture. However sometimes when i refresh the page, the text drops below the picture. This doesn't happen all the time, but if i keep pressing refresh, the text will eventually drop.
I'm assuming that it's because i might be putting my width of the div a little too narrow. but i dont understand why it works sometimes and not other times.
the site is on : https://www.thedashapp.com/about.html
(disclaimer: the site isn't supposed to be live yet, so the links aren't all properly hooked up yet, and the app still hasn't launched)
See pictures:
How it's supposed to look like:
What happens when i click refresh a couple times:
You'd be better off putting the text in a separate div, and perhaps the image too. Then apply float:left; to both the div containing the text and the image or div that contains the image. I'm pretty sure that'll fix it.
I have a div (.header) contained within other divs. When my page loads, momentarily just that one .header div "flashes" white as the page is loading, especially in in Firefox, but a little bit in IE8 too. I can't find what kind of CSS or lack thereof is causing this - there's no images or background color associated with that div. There is a logo.png within the .header. Thoughts?
http://dev.bwmsnow.co.nz/
From what I can see (Firefox on XP) it doesn't so much flash as it looks like it is slow to load the header-container div, and the associated background images. If I load without cache the whole of the logo bar loads last (and is white before load), but not just the one div. YSlow counts some 50 HTTP requests which might explain some of it. It doesn't look like the page is large so much as made up of a lot of pieces that probably create some processing lag.
If I understand the question, my suggestion is an old trick of adding a background color similar to the background image to <div class="header"> so that as the page loads (but before the image loads) the user sees a color similar to the background image. That way the visual impact of the image loading is not as noticeable.
I Photoshop eye dropped your background image and suggest using #a1dff8 as the color. The CSS for should be:
.header{
background:#a1dff8 url('images/yourheader.png');
}
Also, when looking at your code, I see that you have several external JS files. You should consider a minifier. Just Google or StackOverflow for JS/CSS minification.