Pre-loading / AJAX - best methods? - asp.net

I am building a portfolio page, which contains quite anumber of images. I am pulling the image url's from a database, and creating thumbnails from the original source, and the dispaying the thumbnails. When clicked on, displaying the original full size pic.
Loading times are obviuosly affected and the site take some time before displaying anything...
I have tried putting all this in Ajax, but it seems ajax is only reqally effective if the site has initially loaded. As it is now, the site "hangs" while it waits for the on form laod work to be done.
Any ideas on putting a "please wait while iamges laod" section into the container where the iamges will eb displayed?
Thanks in advance.

Typically you create an HTTP handler that your page sends the image IDs to, something like
<img src="image-handler.ashx?id=SOME_ID" alt="..." />
The key to performance here is that you can then cache the images from this handler. You can save the generated thumbnails to disk and check for existence, and if then use something like Response.TransferFile() to send the file (or actually create the thumbnail files on creation of images, not loading them), or even better, apply output caching on the handler, with vary by param to the id key.
For the full images also you can use the same techniques. You can also in addition have some hidden images you keep setting their URLs by AJAX before clicking thumbnails, so, they are ready when a thumbnail is clicked and a full image needs to be displayed.
Those are just high level thoughts as per the amount of detail I get from the question.

Related

Does Pixel Tracking require js code in order to work on Google Tag Manager?

Tag 1: Retargeting
Fire on all pages of the site
For Image format use:
<img height="1" width="1" style="border-style:none;" alt=""
src="https://trck.adsway.org/track/pxl/?adv=ou2fddz&yy=0:r1wen4w&fmt=4"/>
I got this, so I created a Custom Html tag that fires on "All Pages" and I put the image DOM element inside the custom html tag, but I am not sure if this is the only thing we need. Aren't we suppose to add some kind of javascript code in order for this to work? I wasn't provided with any js script tag, and I wasn't provided with any documentation, so I have no idea if pixel tracking doesn't need some kind of js file to make the tracking work. Thanks.
You don't need a JS script in order for retargeting to work. Many vendors will provide a simple image pixel. You'll basically send a ping to the vendor each time a page is loaded.
JS would allow you to do more advanced things like read cookies and global variables to collect more information. But maybe you could reach out to who sent you the script and see if a JS script is provided. If not, you should be good to go with just the image pixel.
You do not need additional code. Image requests are a time-honoured method to send information across domain boundaries. On the receiving end there will be a script that writes the information from the query parameters ("?adv=ou2fddz" etc.) to some kind of data store, where it then can be processed. This was long in use before javascript based tracking became common because it is simple and reliable. In fact, even many javascript based tags generate an image request, only they collect information or set cookies or create user ids etc. via Javascript before they send it off. So this should work fine as is.
What you could do better is not to use a custom HTML tag, since they cause extra work every time the pixel is fired. GTM has a tag type "custom image". You save your user's browsers a little work when instead of using custom HTML, you create a custom image tag and insert the url from the "src" attribute of the image:
(the url is cut of in the image, but you need to use the full src attribute).
The cache busting option will add a random parameter. Browsers might decide to cache the image, which means it will be sent only once to the tracking server and on the next occasion will come from the browser cache. The random parameter means this a different url every time, and thus not cached (the parameter usually does not have ill effects on the tracking).

Seamlessly load images to ASP.NET page

I've been trying to load an image onto an aspx page without revealing its request. I mean - when I monitor the page with Telerik's Fiddler I can see that the image is in the requests list. If I refresh the page, the request is not being shown anymore (apparently the image got cached the first time).
Question: Is it possible to load/cache the image silently, without the user even knowing it had been requested?
After a bunch of hours messing with various techniques involving requests, server side operations and what not, it turned out to be as simple as it can get..
In order to hide the image loading request I modified the previous page.
I have, for example, pages A and B. I need to cloak an image request for page B.
Page A loads a bunch of images already. Lets squeeze in one more? Image gets loaded and cached. When the user opens page B, image is still in cache and is used instead of requesting a new one. All we had to do was to put this
<img src="sampleImage.png" style="display:none" />
code in page A somewhere, so it got requested, loaded and cached, but not shown.Too simple solution to be more embarrased than proud to solve, but this is how I learn, I guess :D

How to not reload iFrame between page clicks

I'm having a tough nut to crack here.
I have the following situation:
- in an iFrame (no way around it) I'm loading an external website/application.
- This iFrame is on one page and one page only.
- Whenever you visit the iFrame page the first time a certain load time is needed for the applicaton (about 5seconds on average).
- In the application you can change the view and parameters etc.
- When you leave that page and go to another, and return later on to the iFrame page the requirement is that there is no load, and the content of the iFrame is as you have left it earlier.
I know this can be done by using frames (which are so 90's) but I really don't want to do that. There has to be a more modern way of doing it.
Just to note, the website around the iFrame is using Sitecore, so this might be a limiting factor in some solutions.
The things I have thought of:
- use 2 frames, one for the header with navigation, and another for the content. In that way the iframe never has to reload and we have moved back in time... :(
- ever click is an Ajax call, the iFrame is in a div that is hidden until the right button is clicked.
And then I found something called BigPipe. I haven't found an ASP.NET implementation yet, but I was hoping someone already had some experience with this.
Anyone any better ideas?
Thx
If your iFrame is a control on a Sitecore sublayout or rendering (or can be moved to a rendering/sublyaout), you can check off the Cacheable option on the sublayout and set it to vary by content or device or whatever depending on what it is. Then you will have the content of that frame in Sitecore's cache, which is managed by Sitecore and it'll always render the cached version whenever possible and should basically solve your dilemma.

optimize and best practice for image call each time

I have client code for large project, their logo is on master page, which he updates weekly.
I have to update the title, image path, etc. on all the server and also upload a new image on all servers, now he wants to automate this process.
What is the best way to accomplish this? I have thought about storing the information (including Image) in database with single record and each time client update this single record when they want. But on each page, the logo image will come from database. Is it ok or should we cache or some other option to reduce load each time? Can we update page(.aspx) file using filestream like we can update text file? because if I update aspx from code then we don't have call any SQL, just upload an image, update the title and other information in aspx page.
Very simple. If the client wants to update something on their own without requiring developer intervention, it needs to go in the database. You can of course add any caching or whatever you like so that it's not necessary to query the database each request.
The only other viable alternative would be giving the client access to the directory that has the logo and insist on a convention for the logo filename. The client can then simply upload a new logo with the same filename and nothing needs to change on the site.
Making changes to the page itself automatically is a hugely bad idea. Avoid that like the plague.
I suppose a final though not bloody likely option is to get the client to realize that a logo shouldn't freaking be changed weekly or even yearly. It's a freaking logo; it's your identifying mark to the public.

Show constant URL for site in asp.net

I have a web site with number of pages, developing in asp.net.
I have a page URL's like:
example:
1) http://www.xyz.com/Home.aspx
2) http://www.xyz.com/Index.aspx
3) http://www.xyz.com/viewMember?Name=abc&id=1
But the end user is at any page, i would like to show the URL like "http://www.xyz.ie".
Is there any setting in web.config ? If not, is there any other way ?
Please help me...
Thanks in advance.
Jagadi
You can not keep one single URL for different page - but you can do some tricks to simulate it.
To make the url stay the same, but the content change, you need to make some trick.
I am not recommend, search engines they will not follow what you do and they show each page different, user can not make bookmark, and average user can easy find the real url of the page, even with one different click on the browser can find it.
One trick is to use frames, or iframes. On the main page you load all the rest inside an iframe, or inside a frame.
Second trick is to use ajax to load each other content.
And finally you can use session to know what to show on the user, user did not change links, but make post back that change the content.

Resources