I have been using a dev tools network tab to check out the loading of resources within a HTML email, because sometimes some of the images do not load properly.
Now I am trying to understand if the email client will always execute the html code in a top to bottom approach, or if there are conditions which can change this.
So I have a tracking pixel and it is located at the very bottom of my email. This pixel does a lot of things which causes it to take about 15 seconds to load. However, because it is at the bottom of my email, it should not interfere with the images being loaded above it. That was what I thought all the time until I checked out the Network tab.
Within the email, a lot of the images are dynamically injected. In the network tab, these images normally have a status of 302 - moved temporarily. It then looks like these images are then reloaded after the tracking pixel has started its request, which could be the cause of some images not loading properly.
I was really hoping for some advice as to whether my theory could be correct, or if I am missing the point altogether?
Thanks
Related
In my web page I have the same image used ~5000 times in different places.
I always heard that browser will automatically cache images and I should not worry about it, yet, when I profiled my page load in Chrome, it does not seem to be the case. Please find attached screenshot of profiling result:
All the marked red areas is downloading the same image over and over again. It is marked as "Receive Data", so I assume it is indeed downloading it every time.
When I check Resource URL being downloaded, each instance has additional unique id added, like: "https://localhost:44344/images/MenuNode.png?1588089781084", which is not present in my code.
All those downloads are adding up to a noticeable chunk of time.
Is there a way to only download this image once, to speed up overall page load time?
Ok, I found it, for some reason a library I was using to draw charts was detecting all images inside it's nodes html and adding unique identifier to them...
I have an old site I am just about well enough (broken arm + cancer) to start working on again and I have already moved it to another server OVH and added an SSL/TLS certificate to it.
However in Chrome when I visit any page on the site, especially https://www.strictly-software.com/plugins/order.asp it shows either (don't know why refreshes would change it but they do sometimes) the insecure sign with the red line through the https:// part of the URL in the address bar or an information circle.
In Firefox however I get a secure lock sign. It maybe some add-on I have used like a popup blocker or something but I am at a loss to find out what is causing these insecure signs to appear when I need locks, especially on the order page
This morning I spent hours going through loads of JavaScript and CSS (background:http://blah.jpg) etc and changing it so it is local and cannot be changed remotely as well as making any http references into src="//" or href="//" etc.
I thought it must be one of the images on the "add this" pop up but cannot see anything in their code. Then I thought the Twitter scroller might be showing images from http destinations but Twitter wraps them all in their own URL format.
Does anyone know from looking at the generated source code what is making the page insecure?
Surely there should be a list somewhere in the browser that shows what content isn't secure and offers you to load or not load it? I know the information icon lets you load or not lot Flash, images or JavaScript but do you know of how I can find out what content isn't secure on these pages without asking visitors?
Thanks in advance.
I have a site that has multiple images being displayed on a page.
These are all varying in size but are in the region of 9MB-15MB.
They are all loading fine except for one. I get a 206 Partial content status.
I have done some research and found on StackOverflow a couple of questions relating to this, but they talk about it in relation to loading a video. But my problem is with an image.
The annoying thing is that all other images are loading just fine, even ones from the same directory and the same page.
Things, that I have checked:
The image is definitely there in the directory.
The image has full 777 privilege as does its folder.
It is 10.6MB, but as I have said, I have other images of this size and bigger which are loading with no problem.
I am able to open the image on the computer (as I am on my local).
Image is being loaded in a standard img tag.
This should only happen if you are sending a Range header in your HTTP request. Does this happen, too, if you are using another browser? If so, this is probably some sort of misconfiguration or bug on the server side. If not, your browser seems to be messy, then I would try to delete the cache or, if this doesn't help, to restart.
I want to achieve:
I have a html page that displays an image.
which is pretty easy. [say my image file name is xyz.jpeg]
When the file changes or replaced with new content, say, the server or by some other mechanism the file is getting changed,
Now I want this modified image gets displayed in the browser WITHOUT REFRESHING the web page
So, kind of a notification system in which the browser is notified with new image, and gets displayed.
I am not expecting the exactly source code, but a direction of which tool that can be used?.
I have come across websocket, but I am not sure if this solves this purpose.
The image can be refreshed on timely manner(for eg 10 seconds) using javascript, ie request will be send to server in specified time interval, and the image will be updated, this is pretty easy to code also. Please refer this question
However this solution has got a negative impact on performance, since the number of request to be served is too high if the page is accessed by multiple users.
Hope this solves your doubt.
Hey my application has a map that is drawn with custom marker images rendered on OpenLayers VectorLayer. The problem here is that I see a lot of requests to the page that has this map and this comes to the server and all the server side code written for that page is executed and HTML is returned to the client and I get an error saying
Resource interpreted as image but transferred with MIME type text/html.
My guess is that the markers rendered on the page are rendered as img controls but their src is set to blank. You can read more about what happens when your control is having the src value as empty here: http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/
I want to find out if these markers are what that is causing the problem or something is kicking off a infinite redirect which is not the case as I always see that it stops after a certain no of requests.
As mentioned in the post above it happens only on Webkit browsers and not on FFX.
Can someone help me find out the src of these requests if there is someway I can track it.
Thanks in Advance.
"Can someone help me find out the src of these requests if there is someway I can track it."
Sure.
Presuming you have Firebug installed, open the Firebug panel and click the Resources tab. At the top, in the left pane that lists tons of stuff, you should see a folder that represents your web page. Open that folder and look for Images. If anything is broken or missing or linking to the wrong place, you would be able to see it there.
If that doesn't satisfy your needs, click the Network tab in Firebug. If you don't see anything there, reload the page. You'll see, more or less, in chronological order, all the page elements that should have been downloaded to render the page, even the parts that are missing.
Look for the image(s) in question, click it once on the left, and you'll see the Headers, Preview, Response, Cookies and Timing tabs on the right. You'll want to look up the information in the Headers, Preview and Response tabs. Additionally, if you find an image you're interested in, you can also double-click the name on the left and see where that leads.
There are some other tricks, but at the very least, this should give you some ammunition to start your troubleshooting.