?
Solved

URGENT! Need way NOT to preload images

Posted on 2009-12-20
9
Medium Priority
?
484 Views
Last Modified: 2012-06-27
The code below works fine except all images are peloaded as the page loads. This is horrible because some areas have hundreds or even thousands of associated pages sometimes taking a minute or more to load.

So I need a way to load only a few images at a time or dynamically load only the images which are about to be displayed. This is based on Jquery, jCarousel Lite. The MouseWheel is turned on and I need to keep it that way.

What suggestions do you have and how me how to change my code to make this work without sacrificing the current funtionality.

lib.min.js is attached.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Carousel</title>
<script type="text/javascript" src="/carousel/lib.min.js"></script>
<script type="text/javascript"> 
	$(function(){	// shorthand for $(document).ready() BTW
        $('div.demo').each(function() {
			// The text of the paragraphs in the rounded divs is also the
			// jQuery code needed to create that effect. Cosmic.
             eval($('p', this).text());
        });
        $('#main p').wrap("<code></code>");
	});
</script>
<style type="text/css">
body {
	font: Verdana, Arial, sans-serif;
	/* An explicit background color is required for Safari. */
	 /* Otherwise your corner chunks will come out black!    */
	background: #f8f0e0;
}
div.section {
	clear: left;
}
h1 {
	font-size: 150%;
	padding: 0
}
h2 {
	background: #ccc;
	padding: 1px 20px;
}
div.demo {
	float: left;
	width: 18em;
	padding: 20px;
	margin: 1em;
	background: #c92;
	color:#000;
	text-align: left;
	font: verdana, arial, sans-serif;
}
div.fun {
	margin: 2px;
}
</style>
<script type="text/javascript">

(function($) {                                          // Compliant with jquery.noConflict()
$.fn.jCarouselLite = function(o) {
    o = $.extend({
        btnPrev: null,
        btnNext: null,
        btnGo: null,
        mouseWheel: true,
        auto: 2000,

        speed: 2200,
        easing: 1000,

        vertical: false,
        circular: true,
        visible: 6,
        start: 0,
        scroll: 5,
	   pause:true,
        beforeStart: null,
        afterEnd: null
    }, o || {});

    return this.each(function() {                           // Returns the element collection. Chainable.

        var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
        var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;

        if(o.circular) {
            ul.prepend(tLi.slice(tl-v-1+1).clone())
              .append(tLi.slice(0,v).clone());
            o.start += v;
        }

        var li = $("li", ul), itemLength = li.size(), curr = o.start;
        div.css("visibility", "visible");

        li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});
        ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
        div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});

        var liSize = o.vertical ? height(li) : width(li);   // Full li size(incl margin)-Used for animation
        var ulSize = liSize * itemLength;                   // size of full ul(total length, not just for the visible items)
        var divSize = liSize * v;                           // size of entire div(total length for just the visible items)

        li.css({width: li.width(), height: li.height()});
        ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));

        div.css(sizeCss, divSize+"px");                     // Width of the DIV. length of visible images

        if(o.btnPrev)
            $(o.btnPrev).click(function() {
                return go(curr-o.scroll);
            });

        if(o.btnNext)
            $(o.btnNext).click(function() {
                return go(curr+o.scroll);
            });

        if(o.btnGo)
            $.each(o.btnGo, function(i, val) {
                $(val).click(function() {
                    return go(o.circular ? o.visible+i : i);
                });
            });

        if(o.mouseWheel && div.mousewheel)
            div.mousewheel(function(e, d) {
                return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
            });

        if(o.auto)
            o.pause=setInterval(function() {
                go(curr+o.scroll);
            }, o.auto+o.speed);

		if(false!==o.pause){			
			this.onmouseover=function(){o.pause=clearTimeout(o.pause);};
			this.onmouseout=function(){
				o.pause=setInterval(function() {
                		go(curr+o.scroll);
            		}, o.auto+o.speed);
			};
		}
        function vis() {
            return li.slice(curr).slice(0,v);
        };

        function go(to) {
            if(!running) {

                if(o.beforeStart)
                    o.beforeStart.call(this, vis());

                if(o.circular) {            // If circular we are in first or last, then goto the other end
                    if(to<=o.start-v-1) {           // If first, then goto last
                        ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
                        // If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
                        curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
                    } else if(to>=itemLength-v+1) { // If last, then goto first
                        ul.css(animCss, -( (v) * liSize ) + "px" );
                        // If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
                        curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
                    } else curr = to;
                } else {                    // If non-circular and to points to first or last, we just return.
                    if(to<0 || to>itemLength-v) return;
                    else curr = to;
                }                           // If neither overrides it, the curr will still be "to" and we can proceed.

                running = true;

                ul.animate(
                    animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
                    function() {
                        if(o.afterEnd)
                            o.afterEnd.call(this, vis());
                        running = false;
                    }
                );
                // Disable buttons when the carousel reaches the last/first, and enable when not
                if(!o.circular) {
                    $(o.btnPrev + "," + o.btnNext).removeClass("disabled");
                    $( (curr-o.scroll<0 && o.btnPrev)
                        ||
                       (curr+o.scroll > itemLength-v && o.btnNext)
                        ||
                       []
                     ).addClass("disabled");
                }

            }
            return false;
        };
    });
};

function css(el, prop) {
    return parseInt($.css(el[0], prop)) || 0;
};
function width(el) {
    return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
};
function height(el) {
    return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
};

})(jQuery);
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
$(function() {
    $(".main .jCarouselLite").jCarouselLite({
        btnNext: ".main .next",
        btnPrev: ".main .prev",
        speed:1000, // main speed
        easing: "easeinout",
	   auto:true,
	   pause:true
    });       
});
//-->
</script>
</head>
<body>
<div class="carousel main">
    <div class="jCarouselLite" style="background-color:#eeeeee"> <a href="#" class="next"><img src="left.png" style="z-index: 2;position:relative;left:0px;top:77px" width="15" height="68" /></a>
        <ul>
<!--- Load page based on news area category --->
<cfquery name="GetStory" datasource="daily-news">
  select *
  from story
  where catid = #form.catinfo.catid#
  order by id desc
</cfquery>

<cfoutput query="GetStory">
    <form action="read.cfm" method="post" name="Select Category">
        <LI>
            <input id="TheImage" type="image" src="#ImagePath#">
        </LI>
    </form>
</cfoutput> 
        </ul>
        <a href="/" class="prev"><img src="right.png" style="z-index: 2;position:relative;left:547px;top:-77px" width="15" height="68" /></a> </div>
</div>
</body>
</html>

Open in new window

lib.min.js
0
Comment
Question by:Qsorb
  • 6
  • 3
9 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26093643
what would you like to show initially then?
Or would you like to load images sequentially after the page is loaded?

Have you tried this?
http://www.malsup.com/jquery/cycle/add.html

0
 

Author Comment

by:Qsorb
ID: 26093731
>what would you like to show initially then?
I'd prefer to load and show only six images, or load them just before they will be displayed so there's no delay or minimal delay.

I looked at the link you gave but honestly, I'm not sure what to add or modify to make it work. Can you make a suggestion on how to do this, or at least modify the code in that link to fit what I need, or suggest something else? I'll try whatever you suggest.

>would you like to load images sequentially
Yes, just as the query calls it, ORDER BY ID DESC
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26093890
'load them just before they will be displayed'
Why don't you load the images on the fly by just changing the source of the image
like

document.images['imageName'].src = ''; \\image url

Only thing that you have load initially is the URL of the image



0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:Qsorb
ID: 26094132
I'd give it a try if you'd show me where it  goes, exactly. There's no way I can tell where to place it. Just cut out a few lines of my code and place your suggestion into it  and post it here. Then I'll give it a try and attempt to understand it.

But remember the image path is defined by ColdFusion as a variable from a cfquey output. It's all very nice for you to toss out a line of code but spending many hours attempting to find where to insert it is almost always the problem. And too often it's difficult because it has to go into a bit of JavaScript code and it's a cf variable.
0
 

Author Comment

by:Qsorb
ID: 26094247
Let's see if I can make this clearer. You probably already know exactly what I'm doing by the code I posted but I'd like to be sure because I need this ASAP.

My SQL table may have several hundred items (rows) so each page in any particular category displays only 20 items at a time per page. It wouldn't make much sense for jcarousel image slider to run though just 20 items. The idea is to allow the user to slide though as many items (images) as there are in any one area. I also display the items in a HTML table but the carousel is just a visual extra attraction. And so far the users seem to like it. But not when there are tons of images.

In addition, the user needs the ability to click on the image and be taken to page with the full news story. I do this with a form. It could done via a passed url but a form works best. It contains the image path, #ImageURL#".

My worry is that you're going to give me  something I cannot understand, have no idea where to place it. This happens all the time and it's very time consumer to figure out what the Expert means. So this is why I've attempted to make t his a bit more clear. Hope I've not mucked it up in the process.

In the snippet, ImagePath is a column in the table. It includes the path and the unique image filename. When the user moves over an image in the carousel the carousel stops and when an image is clicked, the FORM takes the user to a cfm page containing the story and a larger version of the image.

Hope this helps. Again, I really need to be shown exactly where your suggestion goes in my code example above.
<input type="image" src="/news/story/i/#ImagePath#">

Open in new window

0
 

Author Comment

by:Qsorb
ID: 26107482
No response to my last set of replies so can anyone show me how to  impliment the suggestion of:

document.images['imageName'].src = ''; \\image url

into the code I'm using? You get the points if so.
0
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 1500 total points
ID: 26110296
@Qsorb: My apologies for a late reply. I don't have good hands-on experience in Jquery/Coldfusion, so can't tell you the implementation level details.

Following link might help you bit
http://www.learn-coldfusion-tutorial.com/Database.cfm
http://www.learn-coldfusion-tutorial.com/ListsAndArrays.cfm#h1.1

using the last link given above, you can fetch the number of links you want from the resultset variable and display it on the screen.

Let me know if it helped a bit.

Thanks
0
 

Author Comment

by:Qsorb
ID: 26126102
That wasn't any help but I did find that jCarousel has a function for dynamic loading of images and that works just fine. It's located here:

http://sorgalla.com/projects/jcarousel/examples/dynamic_javascript.html

Your links were no help but at least you tried so I'm going to give you points. Thanks.
0
 

Author Closing Comment

by:Qsorb
ID: 31668349
Best I can do for this one.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question