I have wordpress page where I'm loading post images (on page load). If images are removed and loaded again via wp ajax request in my dev. tools I can see that same images are loaded twice. Is it possible to avoid this behaviour and have same images loaded once by different initiators? Or what is the right approach in this case?
Related
is it possible to load web page in background using javascript/jquery? I mean load DOM, run all scripts, load all dependencies (CSS, external JS libraries). I don't want to load HTML and replace it. It's easy to do but will cause all styles/scripts to be loaded after replacement, not before (as far as I know).
The reason is that page loading time is 10-20s and I don't want page to freeze during loading content. There is single JS script which takes 2-4s to initialize. The idea is to show some placeholder page like "page is loading, please wait" and load everything in background.
I know page should be rebuilt so it doesn't take so much time to load but it's not possible in page owner's budget.
EDIT: I thought about loading page in iframe and then move iframe's content to the main body. Would it work? Wouldn't I loose some JS/Jquery data, pointers to DOM elements etc.? Wouldn't it cause to reload all JS?
I have a web page which is loading more than 1000 images per page and these images are located on Amazon severs.
I have added jQuery plugins to this page which are local to the webserver, I am not using any remote JS or CSS.
When the page is loaded for the first time or refreshed the page looks distorted and images are overlapping each other. When the content is fully loaded or cached the page displays correctly.
Is there is a way to load the images in a way that will make the page look good during loading?
Display gif images while original image is loading.
Try
jQuery Image Loader
or
http://bradsknutson.com/blog/display-loading-image-while-page-loads/
Some context, I am running a script on a website's home page to swap background images on a timer. We decided it would be better to attempt to implement preloading of the images, which prompts the following issue in Firefox:
Preloading images on the first page load will not prevent the browser from loading the image from the original source again instead of the cache. Oddly though, refreshing the page will successfully cause the image to be loaded in from the cache.
The JavaScript that runs on page load takes all of the image URLs, and attempts to preload them via calling (new Image()).src = 'http:// ...'; for each one.
Inspecting the page load revealed that the images would be loaded in on page load, but then the image would also be loaded in again when the slide was revealed.
Test Image Link (SO reputation restrictions): http://i.stack.imgur.com/E9KLM.png
In the image, the images -66.png, -21.png, -63.png, and -83.png were preloaded from the JavaScript, but are then requested again when the slider reveals that slide.
What's also strange is that the bottom images look like they were queued to be loading in since the page was created. Maybe it's because this takes priority over the script that was loaded once the document was ready?
To finish off, if I was to refresh the page and jump to a slide that was preloaded with the images, but never revealed, it is shown to be loaded from the cache like it should have been originally.
My theory is that the original background images are maybe declared to needing to be loaded from the server when the page is first loaded, but aren't actually loaded until the slide is revealed. On document ready, when the javascript preloads the images, they're not cached yet so they need to be loaded from the server. Then a slide is revealed and the browser tells that image that it needs to be loaded as originally declared.
Does anyone know why this situation is occuring? If so, are there any solutions to resolve?
I have an idea that involves adding the image URLs as a data-url attribute instead, and then having javascript preload them and add them as background images at that point, but I haven't tested this yet.
For those interested, we were not able to find a perfect solution for this.
What we did notice, however, is that the images were being pulled again based on their size. The larger the image size, the more likely the image was not fetched from the cache when the image was shown to the user.
We semi-resolved this issue by compressing our background images even further, and then greatly limiting the amount of images preloaded on the first page load. We found that these two steps greatly increased the changes of the images being pulled in through the cache when needed. It also saved more bandwidth and improved page loading times in general by a significant amount.
I am using the nivoSlider image gallery on my website, however when the page loads the gallery doesn't appear straight away. And after a little while it loads
Using firebug I have identified it is an issue with including pure chat in my website. If I remove pure chat from my code it loads soon as the page starts. How can I make is so pure chat doesn't affect the load of the image gallery (without removing it from my page)?
With purechat
Without purechat
I am requesting a html5 web page it contains images and sound files. Once all the images and sound files loaded i want to hide a preloader using style property. How do I know last resource loaded for a web page request so that I can hide the preloader?
Note: Here is my situation, I dont use any ajax call it's a normal webpage request.
How do I know last resource loaded for a web page request so that I can hide the preloader?
The load event fires when all files have finished loading from all resources, including ads and images. This link ( http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html ) from IE9 testdrive demonstrate diffenence between load event and DOMContentLoaded event (not supported in IE8-).
As result:
When page starts to loading you must to register event handler for load event and display preloader message.
When load event occur then browser execute your load-event-handler in which you can hide preloader message.
Well, you dont really have access to the "loading status" of your image and sound files. But the Browser fires the onLoad-event, if a component is loaded. This works even for images (and mayby soundfiles). see http://www.htmlcodetutorial.com/images/_IMG_onLoad.html . you can use $(document).ready(...) too (for your html-page) if you are using jQuery.