Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I was browsing around the web and I saw something I've never seen before.
on this site:
http://blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/
When you navigate down the page, the images only load when they are in the visible portion of the browser.
I have never seen this before and was wondering if anyone else has and how exactly one would do it.
I'm guessing this is some sort of Wordpress plugin (that's what he's using) but I'm not sure.
Is it javascript? Are they actually loading on page load but just become visible later for a "snazzy" effect or is this actually useful for quicker page load times?
"wp-content/plugins/jquery-image-lazy-loading"
Lazy loader is a jQuery plugin written
in JavaScript. It delays loading of
images in (long) web pages. Images
outside of viewport (visible part of
web page) wont be loaded before user
scrolls to them. This is opposite of
image preloading.
Using lazy load on long web pages
containing many large images makes the
page load faster. Browser will be in
ready state after loading visible
images. In some cases it can also help
to reduce server load.
http://www.appelsiini.net/projects/lazyload
So it seems it goes through every image specified or inside of the context of an element and replaces the src with a placeholder gif before the images fully load, saves the original URI and when the image is "visible" it replaces the placeholder with the real image.
LazyLoad is no longer available according to the website. Apparently the code no longer works on new browsers and the author doesn't have time to update it.
The "appear" plug in is working well for me.
http://plugins.jquery.com/appear/
It allows you to specify a callback function for an element. The callback function is called when the element appears into view. From the site:
$('#foo').appear(function() {
$(this).text('Hello world');
});
If you look at the source of the page you referenced, it contains this bit of code:
jQuery(document).ready(function($){
jQuery(".SC img").lazyload({
effect:"fadeIn",
placeholder: "http://blogof.francescomugnai.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif"
});
});
I suspect that's how they're accomplishing the effect. It uses the jQuery LazyLoad plugin, which can be found here:
http://www.appelsiini.net/projects/lazyload
As Sanjay pointed out, the jQuery LazyLoad plugin from Applesiini no longer works. Here is another jQuery plugin that I found. Just another option in addition to jQuery Appear.
http://plugins.jquery.com/project/LazyLoadOnScroll
http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/
Related
It's been a long time since I last had to do any html, but one of the features that will apparently still work, but is not good practice, was to divide a page into frames and the you could use some sort of nav bar with all the page links to populate a targeted frame. eg.
clicky
I tried using the <iframe> tag, and although it's almost exactly what I want, I found it to be very frustrating to get it to autosize to the correct height depending on the content being loaded into it.
Obviously, I could just make an almost identical page but change the content on the new one and link from one to the other, but I have a rather nice css slideshow as my background for the site and I don't want it to reload every time a link is clicked!
Now, I'm loving stylesheets and divs, so is there any way to do the above without resorting to HTML 4? I'll take a javascript answer if there really is no way to do this in CSS and HTML 5.
Thanks in advance, you lovely people!
So, you just want to update the actual content, that differs? You could do it with iFrames, but this is not recommended at all.
The "new" way to use is called "AJAX"
It is a technique to download data from the server, without reloading the current page. This is done via JavaScript (and serverside PHP). That way you can update the page content only.
There are many tutorials on the web, also many common questions are answered on stackoverflow alreay. Feel free to check them out :)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Spent the past couple days pulling my hair out and on the road to a brain aneurysm over this.
I've created an HTML + CSS template for Ebay which looks great. Although it does not have the CSS rendered until you refresh the page after you initially open it.
To keep things simple and I'll post the exact test code im using for Ebay:
After its posted and the page is initially opened you see no CSS then the refresh makes the CSS render:
I have a professional page for a product im selling and this obviously wont fly.
This completely baffles me. Ive done everything. All browsers. Hosting the CSS on another site and pointing to it. Nothing works.
Really, anything that can in someway help would be deeply appreciated.Ill keep checking on this post every few hours.
Try using inline styles instead.
<p style="border: 1px groove black;">Thingy</p>
There is a known issue I have come across that causes problems:
When you first load an un-cached item, it loads the item's code directly within eBay. Upon refresh, it loads the item within an iframe (normal behaviour)
The first load causes issues as it carried css from the eBay main page style sheets.
try be more accurate and include a wrapper div and then style with .wrapper p {}
Also, link to an external style sheet to make your life easier updating!
Its from the wrong format/wording used in the inline style. Although they both work, it does not explain how one needs a refresh while the other does not.
You said:
it does not have the CSS rendered until you refresh the page after you initially open it.
This is maybe related to a eBay page load behavior. When you come from an external site (like pasting the eBay link to your browser) then eBay will load the page and will add their own CSS to your HTML tags. When you reload the page then eBay jumps into iframe mode and your Style elements are used.
Check topic #6 here: http://www.fix-css.com/2014/06/ebay-templates-coding-guide/
try to add border-width p{border:1px groove;}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've been told loading jQuery at the end of a page increases performance for mobile.
I don't believe this, however open for an explanation.
Regardless, is there any way to get jQuery calls at the beginning of the page to load only after jQuery has been loaded? I know of timeout work around but they seem inconsistent.
The reason why you get "better" performance is that the page will be parsed before it reaches JavaScript at the end of the document, and once a section is parsed, rendering can begin. By loading JavaScript at the end of the document, you let the basic hard-coded layout in your HTML and CSS appear before you add functionality with JavaScript. This gives the user the illusion of "faster loading time" for your page.
The caveat here is any JavaScript you want to use that will call on external libraries must occur after the libraries' script tags. This is not an issue if you have packed all of your code together into its own file, but it will cause trouble for inline scripts you have strewn about the page.
This is part of why such behavior is discouraged in production applications, the rest having to do with the ability to maximize compression of the script content with gzip and so on.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to do a pre-loading for a website:
I want to create a loading page/image/etc. to show before the actual
page is loaded.
Nice would be something like a spinner/loading-bar
The pre-loader shell vanish when the actual page is fully loaded
How can i achieve this?
You should check if all elements of webpage are loaded.
You can use JQuery, for example:
$(document).ready( function() {
// something here
})
From jQuery documentation:
The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready()
or use jQuery's .load() method to attach load event handlers to the
window or to more specific items, like images.
I don't know your programming skills, but if you are aware of javascript and jQuery you could easily try this tutorial:
http://avexdesigns.com/create-a-jquery-preloader/
The Plugin you will find here: http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/
and all about jquery is found here: http://jquery.com
You can have a progressbar in ur webpage before loading ur actual content.
Refer the link below.
http://tutorialzine.com/2013/09/quick-tip-progress-bar/
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
When google crawls a web page , do google bot crawl
content with code like style="display:none"
content with code like style="display:block"
the question i am asking because i have a website of F&Qs.
For user i want answers to be displayed only when he clicks on "answer/solution" link.
For google bot i want solution section to be crawled else my content of page becomes too less.
Yes google will see content that is both display none and display block
Your FAQ section will be seen by google bots.
See these articles:
Webmaster Guidelines: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=35769
Use a text browser such as Lynx to examine your site, because most search engine spiders see your site much as Lynx would. If fancy features such as JavaScript, cookies, session IDs, frames, DHTML, or Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.
Hidden text and links: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353
Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors. ... If you do find hidden text or links on your site, either remove them or, if they are relevant for your site's visitors, make them easily viewable.
It is debatable if Google does crawl hidden elements; you'll find 'experts' who will argue one way or another, however most of it is pure conjecture. What I like to do in these situations is apply the display: none via JavaScript / jQuery on $(document).ready() that way the user gets the experience you are looking for, while Google indexes the page like so:
<div class="question">Does Google see this?</div>
<div class="answer">Yes is JS is used!</div>
$(document).ready(function(){
$('.answer').hide();
});
It is important to note that this method is also debatable as some have indicated that Google has started executing JS as part of the crawl. That being said, I've had good results using this technique.
I hope this helps!