开发者

Jquery load order

开发者 https://www.devze.com 2023-04-05 08:37 出处:网络
I have this on my document: <ul id=\"slideshow\"> <li><img src=\"img1.jpg\"></li>

I have this on my document:

<ul id="slideshow">
<li><img src="img1.jpg"></li>
<li><img src="img2.jpg"></li>
<li><img src="img3.jpg"></li>
</ul>

<ul id="thumbs">
<li><img src="img1_thumb.jpg"></li>
<li><img src="img2_thumb.jpg"></li>
<li><img src="img3_thumb.jpg"></li>
</ul>

How can I change de load order using jquery?

I need to load #thumbs first. Then load #slideshow.

Right now, on slow connections, all image thumbs are ca开发者_Python百科lled after all slideshow images loads...

Thanks

[]'s

Mateus


Use pre-loading.

$.preloadImages = function(){
  for(var i = 0; i<arguments.length; i++){
    jQuery("<img />", {style:'display:none'}).attr("src", arguments[i]);
  }
}

$.preloadImages("img2_thumb.jpg", "img1_thumb.jpg", "img3_thumb.jpg");

before actual slideshow


You need to write a script that will assign the src for images in #slideshow after the page is loaded/ready.

First, set an id on each img tag in #slideshow, such as slideshow1, slideshow2 and slideshow3.

Then add a jquery loading <script> tag and this script at the bottom of your page:

$(function() {
 $("#slideshow1").attr("src","img1.jpg");
 $("#slideshow2").attr("src","img2.jpg");
 $("#slideshow3").attr("src","img3.jpg");
});


jQuery load has no idea what the content of the requested file is. Thus, you should either, change the order of the images in your file manually, or separate them into two different files and load each one separately.

However, from what I see, I guess you're trying to load images for an image gallery.

I recommend using TN3 gallery.

The reason that you're images are loaded is that browser immediately sends HTTP requests to get the required items of a newly loaded document, so that it can render it. Thus, when browser deciphers your HTML, it first sees the <img src="img1.jpg"> and tries to load that first.

However, using TN3 gallery, your HTML markup would be changed and you would provide the URL to the full image just as an attribute and you fool browser, because it won't send a request for that attribute.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号