Question

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

在文档中，它说我必须在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>

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

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

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

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

Answer 1

这就是我们所做的和它的工作。我们跳过设置src的{{1}}属性，并将img-location添加到假属性img。然后我们加载一个lsrc值的动态图片，并在加载后设置实际图片的lsrc。

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

这是代码。

src

编辑：Trick是仅在临时img中加载该源时才设置$(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处理这个问题。

Answer 2

除了Xhalent的回答，使用jQuery中的.append（）函数将它们添加到DOM：

您的HTML只有：

<div id="slider">
</div>

然后你的jquery将是：

jQuery(function(){
    $("#slider").append('<img src="images/slide1.jpg" alt="" />');
});

Answer 3

check out jquery load（）事件，它等待包括图形在内的所有内容

$(window).load(function () {
  // run code
});

加载后，您可以使用以下方式加载图像：

var image = new Image();
image.src = "/path/to/huge/file.jpg";

您也可以在图像上添加函数onload

image.onload = function() {
  ...
}

Answer 4

最好的使用方法是 b -lazy js 。 bLazy是一个轻量级的延迟加载图像脚本（压缩后压缩小于1.2KB）。它使您可以延迟加载和多服务映像，从而节省带宽和服务器请求。如果用户不浏览整个页面，将具有更快的加载时间并保存加载的数据。有关选项，功能和示例的完整列表，请访问博客文章：http://dinbror.dk/blog/blazy。

以下示例是带有图像回调的延迟加载多服务响应图像示例：）如果您的设备宽度小于420像素，它将为图像提供更小和更小的版本。加载图像后，它将删除回调中的加载器。

以HTML格式

 <img class="b-lazy"
     src="placeholder-image.jpg"
     data-src="image.jpg"
     data-src-small="small-image.jpg"
     alt="Image description" />

在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);
        }
   });

Example

Answer 5

我正在使用以下工具为滑块供电，并提高了页面加载性能。

   for (var i = document.images.length - 1; i >= 0; i--) {
      var this_image = document.images[i];
      var src = $(this_image).attr('src') || '' ;
      if(!src.length > 0){
        var lsrc = $(this_image).attr('lsrc') || '' ;
        if(lsrc.length > 0){
          $(this_image).attr("src",lsrc);
        }
      }
    }

Answer 6

jquery有一个在加载文档后执行javascript的语法：

<script type="text/javascript">
jQuery(function(){

//your function implementation here...

});
</script>

jQuery，JavaScript，HTML：如何在加载其他所有内容后加载图像？

6 个答案: