jQuery，JavaScript，HTML：如何在加载其他所有内容后加载图像？ [英] jQuery, JavaScript, HTML: how to load images after everything else is loaded?

问题描述

嘿伙计们，
我有一个非常复杂的页面，有很多脚本和相当长的加载时间。在该页面的顶部，我想实现jquery Nivo Slider（http://nivo.dev7studios.com/）。

在文档中我说我必须列出div中滑块的所有图像＃滑块

 < div id =slider> 
< img src =images / slide1.jpgalt =/> 
< a href =http://dev7studios.com>< img src =images / slide2.jpgalt =title =＃htmlcaption/>< / a> 
< img src =images / slide3.jpgalt =title =这是标题的示例/> 
< img src =images / slide4.jpgalt =/> 
< / div> 
  

但是我可能有10张1000x400px的图像非常大。页面加载时会加载这些图像。由于它们在我的标题中，这可能需要相当长的时间。

我正在寻找一种方法来使用任何jquery Slider插件（如nivo滑块），但要么动态加载图像或者在我的页面上的其他所有内容都加载后加载所有这些图像。

我知道如何解决这个问题吗？

甚至有办法在一切之后启动javascript进程页面上的其他内容已加载？如果有一种方法我可能有我的问题的解决方案（使用jquery ajax load（）方法）...但是我不知道如何等待其他一切加载，然后启动所有图像的滑块。 / p>

解决方案

这是我们所做的和它的工作。我们跳过 img 的设置 src 属性，并将img-location添加到假属性 lsrc 。然后我们使用 lsrc 值加载动态图像，并仅在加载后设置实际图像的 src 。 p>

它不是关于更快的加载，而是关于仅在完全下载到页面上时显示图像，以便用户不必看到恼人的半载图像。在加载实际图像时可以使用占位符图像。

这是代码。

  $（function（）{
 $ .each（document.images，function（）{
 var this_image = this; 
 var src = $（this_image） .attr（'src'）||''; 
 if（！src.length> 0）{
 //this_image.src = options.loading; // show loading 
 var lsrc = $（this_image）.attr（'lsrc'）||''; 
 if（lsrc.length> 0）{
 var img = new Image（）; 
 img。 src = lsrc; 
 $（img）.load（function（）{
 this_image.src = this.src; 
}）; 
} 
} 
}）; 
}）; 
  

编辑：诀窍是设置 src 仅在临时img中加载该源时才归属。 $（img）.load（fn）; 处理。

hey guys, i have a very complex page with a lot of scripts and a rather long loading time. On top of that page I want to implement the jquery Nivo Slider (http://nivo.dev7studios.com/).

In the documentation it says I have to list all images for the slider inside of a div#slider

<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>

However I might have 10 images with a 1000x400px which is quite big. Those images would load when the page loads. Since they are in my header this might take quite a while.

I looking for a way to use any jquery Slider Plugin (like the nivo slider) but either dynamically load images or load all those images after everything else on my page has loaded.

Any idea how I could solve that?

Is there even a way to start a javascript process after everything else on the page has loaded? If there is a way I might have an solution for my problem (using the jquery ajax load() method) ... However I have no idea how to wait for everything else to load and then start the slider with all the images.

解决方案

Here's what we did and its working great. We skipped setting src attribute of img and added img-location to a fake attribute lsrc. Then we load a dynamic image with lsrc value, and set the src of actual image only after its loaded.

Its not about faster loading, but its about showing the images only when its downloaded completely on your page, so that user do not have to see that annoying half-loaded images. A placeholder-image can be used while the actual images are being loaded.

Here's the code.

 $(function(){
    $.each(document.images, function(){
               var this_image = this;
               var src = $(this_image).attr('src') || '' ;
               if(!src.length > 0){
                   //this_image.src = options.loading; // show loading
                   var lsrc = $(this_image).attr('lsrc') || '' ;
                   if(lsrc.length > 0){
                       var img = new Image();
                       img.src = lsrc;
                       $(img).load(function() {
                           this_image.src = this.src;
                       });
                   }
               }
           });
  });

Edit: Trick is to set the src attribute only when that source is loaded in temporary img. $(img).load(fn); handles that.

这篇关于jQuery，JavaScript，HTML：如何在加载其他所有内容后加载图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！