I have a template page named as 'career_new.php'. I want to use this template for my several pages related to different careers such as CA, Engineering, MBA etc. For this I have written the code which is appearing below this paragraph. This code is executing without any Error and showing all the content properly but it is taking too much time to load this page. Here is the code for my page ca.php :
<?php
include_once 'career_new.php';// to include the main page (template page)
?>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="changeContent.js"></script>
<script>
$("#career_content").load("html_ar/ca_ar_1.html");// for main content
$("#adv1").load("php/add_demo.php");// for advertisement
$("#slider2").load("php/ca_link1.php");// for left hand side article list
$("#Div3").load("html_ar/img_gal.html");//for right hand side image gallery
$("#Div5").load("ph_link2.php"); // for right hand side external article list
$("#Div7").load("php/ph_link3.php");// for bottom link1
$("#Div9").load("php/ph_link4.php");// for bottom link2
$("#Div11").load("php/ph_link5.php");//for bottom link3
</script>
What should I do to reduce the page loading time?
I am checking it with internet connection of 2.0 mbps bandwidth and it is taking approximately 15 sec. to load the page which is too high as compare to standard time of 4s-6s.
Please guide me in this regard.
Size of the template page (including all html,css,js and other image files is around 800 KB )
Related
im using wordpress and want to add a link which open in a frame/lightbox. Cant find a small solution for that.
There should be no new window. Just a content box which appear inside the page where i am. I hope u know what i mean
That should be pretty easy using the Easy Fancybox plugin.
Citing the entry from the FAQ section of the plugin's page:
Can I display web pages or HTML files in a FancyBox overlay?
Yes. First, enable the iFrame option on Settings > Media. Then, in your post or page content create a link to any web page or .htm(l) file in your content. Then switch to the Text tab in the Classic Editor or to Edit as HTML (under More options in the block menu) in Gutenberg, find the link <a ... > tag and give it a class="fancybox-iframe" attribute.
Voilà !
Beware, though, that:
Note: Not all external web pages are allowed to be embedded in an iframe and may be blocked by a server response header or script. The result will be either an empty/blank light box or the target page “breaking out” of the light box and loading in the main browser tab.
And you'd probably face the same problem with any other iframe solution. So that would work better with locally served pages.
Hi I am redesigning my website, I am a novice at JS and CSS, pretty good with HTML 5. I am working on a new responsive web site with a gallery page of images using Lightbox.
The Beta Site and Gallery Page is here:
http://www.sound-enclosures.com/FanAir/index-3.html
I have a Link to " img src= " to the Thumbnail and a "a href= " to the BIG Image.
Problem is only One of Four Images load. It's the First Image on the Page The Blue Picture. This seems to work correctly. The other Images try to link, however they just Hang Up on Loading. I have verified the file names, locations, checked the URL's etc.
I am using Lightbox.min. script before "/head" and bootstrap.min.js at the bottom of my page before "/body"
The Monster Template I am using was furnished with jQuery v1.11.1,
I have read in the Stackoverflow Forums that JQuery 1.8 seems to work better with Lightbox, I have not tried that and would be reluctant to do so as it might mess up other pages.
Can any one take a look and possibly provide some assistance, guidance?
Thank you all in advance.
Scotty
Your images do not load because they are either not on your server or not in the folder images
There is no image named: page4_pic15_Big.jpg that is set as your href:
<a href="images/page4_pic15_Big.jpg" data-title="Heavy Duty Centrifugal Blower" rel="lightbox"> <img src="images/page4_pic15.jpg">
Backward Inclined Blowers<br>
</a>
So i'm using main index page, with all the "main" links & css styles.
Then i have other .asp pages with only row code and i display those pages through my index page with:
Dim strPage
strPage = Request.QueryString("show")
If Len(strPage) = 0 Then
Server.execute("sign-in.asp")
Else
Server.execute(strPage & ".asp")
End if
So with this, if i go http://8.8.8.8/?show=start
It will show me start.asp with the styles etc. taken from the index.asp page.
But i have noticed, that my webpage is taking AGES to load.
Previewing it on localhost/?show=start is awesome&fast. But as soon it goes over public. Slow as hell. So seems like this code is slowing up my page somehow, is there some editing i can do OR configure my IIS correctly to handle this better?
(When i removed this and added the links, css etc. on each page it load alot faster like if it was localhost, but i can't go with that, because i edit the "main" links and css alot. And i want to edit them on 1 page only.)
If you prefer to have multiple pages (rather than only one index.asp page) but only one file to edit styles and other general setting, the best way is to include a setting file above all your pages like this
sample source of "setting.asp":
<style>
/*general styles goes here*/
</style>
<script src="setting.js"></script>
// and other general setting including js file and css files goes here
where this is a sample source of index.asp:
<html>
<!--#include file="setting.asp"-->
//index codes here..
</html>
and this is sample source of signin.asp:
<html>
<!--#include file="setting.asp"-->
//signin codes here..
</html>
For many days I have been trying to figure out a work around to loading javascript and style sheets in my content pages.
How do I link all the resource files like .css and .js in the markup for the master page and then use these directly in the content pages without adding them to each of said content pages?
I found that we can link .css files by using themes and initializing a theme in the master page; But what about .js files and images?
How can they be linked in a master page and then accessed in the content pages?
Please point me in the right direction.
On a master page anything you put in the head will be present for all content pages that use that master.
That is to say if in your master page you have:
<head runat="server">
<script type="text/javascript" src="/js/pages/jquery.min.js"></script>
<script type="text/javascript" src="/js/pages/jquery.jscrollpane.min.js"></script>
</head>
then every content page will contain the same thing in the head.
If you had scripts that were used by some pages and not others then on a master page you can define an <asp:content> tag that is in the <head> of the master page.
Then in your content pages you can place links to your javascript files right into the content place holder for the content tag in the page head.
If you wanted to link pictures, I would suggest doing this through javascript. If you created a <script> block in your master page head with something like the following:
var ReusableImageVariable = new Image();
ReusableImageVariable.src = '\A\Path\To\Your\image.jgp';
Then on any content page you could place a script block that would use that ReusableImageVariable and copy it onto the document in a specified place:
<script type='text/javascript'>
document.getElementById('PlaceHolderForImage').appendChild(ReusableImageVariable);
</script>
Where PlaceHolderforImage is the id of a <div> or other containing element. This would help with browser load times as well because you are loading the images the same time you are loading the style sheets and scripts.
Finally if you wanted to use just ASP, I would define the images as properties of the master page. Then any content page can just access them in code behind and load them where ever you need them.
I assume we are talking web forms, not MVC? You can put scripts in the <asp:ScriptManager> control's <Scripts> collection, or <CompositeScript> list. You can get a reference to the ScriptManager via ScriptManager.GetCurrent(PageReference);
Images there isn't anything specifically like this that's built for images; however, it can be built.
Best Practices for Speeing Up Your Web Site from Yahoo includes the following recommendation:
When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page. During this time, the browser is idle as it waits for the data to arrive. In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page. The benefit is mainly seen on busy backends or light frontends.
A good place to consider flushing is right after the HEAD because the HTML for the head is usually easier to produce and it allows you to include any CSS and JavaScript files for the browser to start fetching in parallel while the backend is still processing.
Example:
... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->
Note the point at which the flush occurs here is after the head tag is written. This makes a lot of sense so the browser can begin loading images and scripts while the remainder of the page is rendered and served.
Is there a way to flush after the head (or any other part of the page) explicitly using ASP.NET?
You should be able to put the following in your page between the end of the head and the beginning of the body statement:
<% Response.Flush(); %>
However, be careful here in the event that you are using a script manager or any other kind of control that will register itself for output in the head section of the html.
You might want to explicitly set Buffer=true in the #Page tag at the top of the page as well to avoid Response.Flush() throwing errors.