I saw this on Hulu.com once, but can't get it to behave that way.
The problem is that I have a "marquee" that slides when you click the next button. There are 2 images per section, a total of about 40 sections.
The issue is that the browser loads all 40 * 2 images and it is consuming bandwidth like crazy.
Is there a way to, saw load the images when the "slide" is shown?
Load them in ajax. Look up jquery for that, it's the simplest way.
It also look like you're doing a carousel. Maybe you could use one of the many existing solutions that already handle assynchronous loading of data.
Related
I have a lot of images (40.000) on server and their references inside a db table - name, size, date, description etc.
Tried to load all images at once and only 100 of them to be visible, the rest are hidden by css - display:none and become visible by scrolling down.
Result - page loading takes too long and new images becomes visible very slow.
So I go back to the old method - pagination - loading images in steps, clicking on next-prev buttons.
Now I see a new chrome feature - rendersubtree
Could this thing be a solution to load all 40.000 images at once and make them visible by scrolling fluently?
If yes - pls any code example.
Thanks.
It depends why your page is slow. If you're using display:none to hide a whole bunch of content, rendersubtree is unlikely to help in that case.
There's also an img decode API which might help in your case https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode
But before you jump in there, I would recommend doing some profiling to figure out exactly which part of the process is slow. (img loading / layout / etc)
I'm working on a web project and I want to load my webpages with an even transition. What I get right now is my photos and background downloading in a curtain-like manner. I want it to show up when it is all loaded instantly.
I don't mind if there is a progress bar or something but not the curtain-like manner.
I used the prefetch/prerender html 5 tag but with no success..
visit here :
http://hellenic-jewls.com/
and then try to hover to another webpage to see that my images are downloaded progressively like a curtain :
e.g. http://hellenic-jewls.com/classical/
ofcourse when the webpages are cached it's ok.
HTML5 prerender/prefetch doesn't work that way. You use them to hint to the browser that you think that page will be visited next and should therefore be prerendered. There is no guarantee that this will happen though... it's up to the browser to decide if it wants to prerender the page.
Further, there will only be one page prerendered at any one time.
What you can do is hide your images, then use a script like https://github.com/desandro/imagesloaded to signal when the images are loaded, at which point you can show the images (with a fade-in transition if desired)
I am working on getting only a part of the navigated webpage.
for example, "the face book . com" homepage.
I only want the division of groups on the left to appear in my web Browser control.
is that possible?
I am having ideas on fetching but i don't know how to do it. any other way is fine.
also, please let me know where to put the code, because i am new on vb.net
web.Document.All("mConnect").InvokeMember("click")
this is for clicking something inside the html
web.Document.getElementId("<div>").InnerHtml("")
is this code correct? what is it for?
let's say we cut the google homepage 4 ways. and i only want Quadrant 2 to appear in my webBrowser control. is that possible? I think this is a clearer explanation..
I saw one post in this forum that technically solved my problem by manually forcing the webbrowser control to scroll to what place I want.
Web.Navigate("javascript:window.scroll(320,10,document.body.scrollHeight);")
320 is the width, 10 is the height. edit to where you want it to be.
adjust the size of your webBrowser then you can particularly choose the part that you want to see, disable scrollbars if you want.
I want to add a background music to my website, but i want that music to play continuously across all pages.
For e.g: i have music which is approx 10min, i am on Home page for 2 minutes music starts from 1 second, when i goto other page the music should start from 2 minutes 1 second.
i've searched across Google & StackOverflow but unfortunately didn't found any answer as per my requirement. :(
i just wanted to know that is it possible to do??? If yes then what kind of mechanism is used for that???
As far as I know, this is not quite easy to accomplish.
There are two practices you may follow, with the first being the most common (IMHO).
Sites that have a music background that doesn't start all over when you navigate, mostly use Ajax or similar methods to navigate, instead of allowing the page to normally refresh. This is mostly common with flash websites, but it is possible to do with Ajax refreshing just the inner content of your site.
The second way would involve somehow passing on a variable that remembers where the user was, but you cannot avoid the loading gaps, and the whole result would be very uncommon and not really pleasant.
There's a few ways you can do this off the top of my head. The easiest would probably be some JavaScript that would load the content of the next page into the current page:
<div id="content">[Your changing page content goes in here]</div>
A link:
Some Page
Some JS:
function loadNext(page){
//using jquery
// assigning to a var like this lets you do things like abort the call
var jqxhr = $.ajax({type:"get",url:page,dataType:"text"});
jqxhr.success(function(result){ $("#content").html(result); });
}
Another, probably simpler way is to load your page content into an iframe and then just have them navigate within that, that'd be a lot safer too as it won't break if people have JS disabled.
<iframe src="homepage.html"></iframe> //You'll need to size this to whatever the content needs obviously, like 'style="width:100%;height:100%"'
Both of these solutions require that your content be able to be separately loaded from the wrapper of the page, so that things like headers and footers don't duplicate infinitely as you navigate around.
So I'm having a bit of difficulty getting started on this as I'm quite horrid with javascript. My goal is to scrape some text off of a page (that has nothing but the text I want on it) and load it inside of a floating div or something when I load another page.
In essence:
timer.html contains a timer that displays the current time and self-reloads every 10 seconds.
page.html is loaded, I want to display timer.html at the bottom of page.html
Note: I don't own any of the source involved outside of my test envir, otherwise there's a million easier ways to do this.
Can help me with resources or code examples?