jQuery、JavaScript、HTML：如何在加载其他所有内容后加载图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5402680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery, JavaScript, HTML: how to load images after everything else is loaded?
提问by matt
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/).
我有一个非常复杂的页面，有很多脚本和相当长的加载时间。在该页面的顶部，我想实现 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#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.
但是我可能有 10 张 1000x400px 的图像，这是相当大的。这些图像会在页面加载时加载。由于它们在我的标题中，这可能需要很长时间。
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.
我正在寻找一种方法来使用任何 jquery 滑块插件（如 nivo 滑块），但要么动态加载图像，要么在页面上的其他所有内容加载后加载所有这些图像。
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.
在页面上的所有其他内容加载后，甚至有没有办法启动 javascript 进程？如果有办法解决我的问题（使用 jquery ajax load() 方法）...但是我不知道如何等待其他所有内容加载，然后使用所有图像启动滑块。
回答by simplyharsh
Here's what we did and its working great. We skipped setting srcattribute of imgand added img-location to a fake attribute lsrc. Then we load a dynamic image with lsrcvalue, and set the srcof actual image only after its loaded.
这就是我们所做的，而且效果很好。我们跳过了设置src属性，img并将 img-location 添加到了一个假属性中lsrc。然后我们加载一个带有lsrc值的动态图像，并src在加载后才设置实际图像的值。
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 srcattribute only when that source is loaded in temporary img. $(img).load(fn);handles that.
编辑：技巧是src仅在该源加载到临时 img 中时才设置属性。$(img).load(fn);处理那个。
回答by Matt Asbury
In addition to Xhalent's answer, use the .append() function in jQuery to add them to the DOM:
除了 Xhalent 的回答，使用 jQuery 中的 .append() 函数将它们添加到 DOM：
Your HTML would just have:
您的 HTML 将只有：
<div id="slider">
</div>
And then your jquery would be:
然后你的 jquery 将是：
jQuery(function(){
$("#slider").append('<img src="images/slide1.jpg" alt="" />');
});
回答by Han Dijk
check outjquery load() event, it waits for everything including graphics
查看jquery load() 事件，它等待包括图形在内的所有内容
$(window).load(function () {
// run code
});
on load you could then load the images using:
在加载时，您可以使用以下方法加载图像：
var image = new Image();
image.src = "/path/to/huge/file.jpg";
You can add a function onload to the image too
您也可以向图像添加一个函数 onload
image.onload = function() {
...
}
回答by TarangP
the best way to use is b -lazy js. bLazy is a lightweight lazy loading image script (less than 1.2KB minified and gzipped). It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data loaded if he/she doesn't browse the whole page. For a full list of options, functions and examples go to the blog post: http://dinbror.dk/blog/blazy.
最好的使用方法是b -lazy js。bLazy 是一个轻量级的延迟加载图片脚本（压缩和压缩后小于 1.2KB）。它可以让你延迟加载和多服务你的图像，这样你就可以节省带宽和服务器请求。如果用户不浏览整个页面，他/她将有更快的加载时间并保存加载的数据。有关选项、功能和示例的完整列表，请访问博客文章：http: //dinbror.dk/blog/blazy。
The following example is a lazy loading multi-serving responsive images example with a image callback :) If your device width is smaller than 420 px it'll serve a lighter and smaller version of the image. When an image has loaded it removes the loader in the callback.
以下示例是带有图像回调的延迟加载多服务响应图像示例 :) 如果您的设备宽度小于 420 像素，它将提供更轻且更小的图像版本。加载图像后，它会在回调中删除加载器。
In Html
在 HTML 中
<img class="b-lazy"
src="placeholder-image.jpg"
data-src="image.jpg"
data-src-small="small-image.jpg"
alt="Image description" />
In js
在js中
var bLazy = new Blazy({
breakpoints: [{
width: 420 // Max-width
, src: 'data-src-small'
}]
, success: function(element){
setTimeout(function(){
// We want to remove the loader gif now.
// First we find the parent container
// then we remove the "loading" class which holds the loader image
var parent = element.parentNode;
parent.className = parent.className.replace(/\bloading\b/,'');
}, 200);
}
});
回答by Xhalent
jquery has a syntax for executing javascript after document has loaded:
jquery 有一个在文档加载后执行 javascript 的语法：
<script type="text/javascript">
jQuery(function(){
//your function implementation here...
});
</script>
