Div 显示:无 - 只想在内容可见时加载内容

Div display:none - want to only load content when it's visible

本文关键字：加载 显示 只想 Div      更新时间：2023-09-26

我有一系列以图像为背景的div，相当大的图像，1-2 MB。

我想做的是仅在它们可见时加载其中的内容。

（它们显示：默认情况下无，单击各种链接时，我使用 jquery 向下/向上滑动它们）。

你应该

发布你的代码，但我认为这可能是你要找的。

.html

<a href="#">Link to click</a>
<div id="imgname"></div>

jquery

$('a').click(function(){
 $('div#imgname').html('<img src="image.path" />');
});

发送 HTML 并向下滑动div 块 

<a href="#">Link to click</a>
<div id="imgname"><img src="image.path" /></div>

下面是一个可能可行的想法的粗略草图。为要加载的每张照片创建隐藏的图像标记，直接附加 onload 事件处理程序。 insert只是获取刚刚加载的图像并创建一个css background规则以插入到适当的div中。

<!DOCTYPE html>
<html>
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type="text/javascript" charset="utf-8"></script>
    <style type="text/css" media="screen">
      div.placeHolder {
        width: 400px;
        height: 400px;
      }
    </style>
  </head>
  <body>

  <img  data-id='imageA' 
        src='http://some-large-image.jpg' 
        style='display:none;' 
        onload='insert(this);' />
  <div data-id='imageA' class='placeHolder' style='display:none;'></div>
  <script>
    function insert(img){
      $img = $(img);
      $div = $('div.placeHolder[data-id='+$img.attr('data-id')+']');
      var cssSnippet = "transparent url("+ $img.attr('src') +") no-repeat 0 0";
      $div.css('background', cssSnippet).show();
    }
  </script>
  </body>
</html>
相关文章：