图片懒加载
//1.下载插件
npm install vue-lazyload
//2.引入图片懒加载与图片
import VueLazyload from 'vue-lazyload'
import loading from '@/assets/images/loading.gif'
//3.定义懒加载图片的loading状态
Vue.use(VueLazyload, {
loading
})
//4.获取图片,并实现懒加载
<img v-lazy="图片">
路由懒加载
//import Home from '@/pages/Home'
const Home = () => import('@/pages/Home')
图片懒加载原理一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.imgBox{
width: 100px;
height: 50px;
}
img{
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
<p>31</p>
<p>32</p>
<p>33</p>
<p>34</p>
<p>35</p>
<p>36</p>
<p>37</p>
<p>38</p>
<p>39</p>
<p>40</p>
<p>41</p>
<p>42</p>
<p>43</p>
<p>44</p>
<p>45</p>
<p>46</p>
<p>47</p>
<p>48</p>
<p>49</p>
<p>50</p>
<p>51</p>
<p>52</p>
<p>53</p>
<p>54</p>
<p>55</p>
<p>56</p>
<p>57</p>
<p>58</p>
<p>59</p>
<p>60</p>
<p>61</p>
<p>62</p>
<p>63</p>
<p>64</p>
<p>65</p>
<p>66</p>
<p>67</p>
<p>68</p>
<p>69</p>
<p>70</p>
<p>71</p>
<p>72</p>
<p>73</p>
<p>74</p>
<p>75</p>
<p>76</p>
<p>77</p>
<p>78</p>
<p>79</p>
<p>80</p>
<p>81</p>
<p>82</p>
<p>83</p>
<p>84</p>
<p>85</p>
<p>86</p>
<p>87</p>
<p>88</p>
<p>89</p>
<p>90</p>
<p>91</p>
<p>92</p>
<p>93</p>
<p>94</p>
<p>95</p>
<p>96</p>
<p>97</p>
<p>98</p>
<p>99</p>
<p>100</p>
<p>101</p>
<p>102</p>
<p>103</p>
<p>104</p>
<p>105</p>
<p>106</p>
<p>107</p>
<p>108</p>
<p>109</p>
<p>110</p>
<p>111</p>
<p>112</p>
<p>113</p>
<p>114</p>
<p>115</p>
<p>116</p>
<p>117</p>
<p>118</p>
<p>119</p>
<p>120</p>
<p>121</p>
<p>122</p>
<p>123</p>
<p>124</p>
<p>125</p>
<p>126</p>
<p>127</p>
<p>128</p>
<p>129</p>
<p>130</p>
<p>131</p>
<p>132</p>
<p>133</p>
<p>134</p>
<p>135</p>
<p>136</p>
<p>137</p>
<p>138</p>
<p>139</p>
<p>140</p>
<p>141</p>
<p>142</p>
<p>143</p>
<p>144</p>
<p>145</p>
<p>146</p>
<p>147</p>
<p>148</p>
<p>149</p>
<p>150</p>
<p>151</p>
<p>152</p>
<p>153</p>
<p>154</p>
<p>155</p>
<p>156</p>
<p>157</p>
<p>158</p>
<p>159</p>
<p>160</p>
<p>161</p>
<p>162</p>
<p>163</p>
<p>164</p>
<p>165</p>
<p>166</p>
<p>167</p>
<p>168</p>
<p>169</p>
<p>170</p>
<p>171</p>
<p>172</p>
<p>173</p>
<p>174</p>
<p>175</p>
<p>176</p>
<p>177</p>
<p>178</p>
<p>179</p>
<p>180</p>
<p>181</p>
<p>182</p>
<p>183</p>
<p>184</p>
<p>185</p>
<p>186</p>
<p>187</p>
<p>188</p>
<p>189</p>
<p>190</p>
<p>191</p>
<p>192</p>
<p>193</p>
<p>194</p>
<p>195</p>
<p>196</p>
<p>197</p>
<p>198</p>
<p>199</p>
<p>200</p>
<p>201</p>
<p>202</p>
<p>203</p>
<p>204</p>
<p>205</p>
<p>206</p>
<p>207</p>
<p>208</p>
<p>209</p>
<p>210</p>
<p>211</p>
<p>212</p>
<p>213</p>
<p>214</p>
<p>215</p>
<p>216</p>
<p>217</p>
<p>218</p>
<p>219</p>
<p>220</p>
<p>221</p>
<p>222</p>
<p>223</p>
<p>224</p>
<p>225</p>
<p>226</p>
<p>227</p>
<p>228</p>
<p>229</p>
<p>230</p>
<p>231</p>
<p>232</p>
<p>233</p>
<p>234</p>
<p>235</p>
<p>236</p>
<p>237</p>
<p>238</p>
<p>239</p>
<p>240</p>
<p>241</p>
<p>242</p>
<p>243</p>
<p>244</p>
<p>245</p>
<p>246</p>
<p>247</p>
<p>248</p>
<p>249</p>
<p>250</p>
<p>251</p>
<p>252</p>
<p>253</p>
<p>254</p>
<p>255</p>
<p>256</p>
<p>257</p>
<p>258</p>
<p>259</p>
<p>260</p>
<p>261</p>
<p>262</p>
<p>263</p>
<p>264</p>
<p>265</p>
<p>266</p>
<p>267</p>
<p>268</p>
<p>269</p>
<p>270</p>
<p>271</p>
<p>272</p>
<p>273</p>
<p>274</p>
<p>275</p>
<p>276</p>
<p>277</p>
<p>278</p>
<p>279</p>
<p>280</p>
<p>281</p>
<p>282</p>
<p>283</p>
<p>284</p>
<p>285</p>
<p>286</p>
<p>287</p>
<p>288</p>
<p>289</p>
<p>290</p>
<p>291</p>
<p>292</p>
<p>293</p>
<p>294</p>
<p>295</p>
<p>296</p>
<p>297</p>
<p>298</p>
<p>299</p>
<div class="imgBox"><img src="./img/1.png" data-src="https://img1.baidu.com/it/u=3392591833,1640391553&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714" alt=""></div>
<div class="imgBox"><img src="./img/1.png" data-src="https://img1.baidu.com/it/u=3392591833,1640391553&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714" alt=""></div>
<div class="imgBox"><img src="./img/1.png" data-src="https://img1.baidu.com/it/u=3392591833,1640391553&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714" alt=""></div>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<script>
//图片懒加载
const images = document.querySelectorAll("img")
//监听浏览器的滚动事件
window.addEventListener('scroll',(e)=>{
images.forEach(img=>{
//当图片距离顶部的高度小于可视区的高度时候,那么加载图片
//获取的是图片距离可视区顶部的高度
// img.getBoundingClientRect().top;
const imgTop = img.getBoundingClientRect().top;
if(imgTop < window.innerHeight){
const data_src = img.getAttribute('data-src')
img.setAttribute("src",data_src)
console.log("执行了次数");
}
})
})
</script>
</body>
</html>
图片懒加载原理2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.imgBox{
width: 100px;
height: 50px;
}
img{
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
<p>31</p>
<p>32</p>
<p>33</p>
<p>34</p>
<p>35</p>
<p>36</p>
<p>37</p>
<p>38</p>
<p>39</p>
<p>40</p>
<p>41</p>
<p>42</p>
<p>43</p>
<p>44</p>
<p>45</p>
<p>46</p>
<p>47</p>
<p>48</p>
<p>49</p>
<p>50</p>
<p>51</p>
<p>52</p>
<p>53</p>
<p>54</p>
<p>55</p>
<p>56</p>
<p>57</p>
<p>58</p>
<p>59</p>
<p>60</p>
<p>61</p>
<p>62</p>
<p>63</p>
<p>64</p>
<p>65</p>
<p>66</p>
<p>67</p>
<p>68</p>
<p>69</p>
<p>70</p>
<p>71</p>
<p>72</p>
<p>73</p>
<p>74</p>
<p>75</p>
<p>76</p>
<p>77</p>
<p>78</p>
<p>79</p>
<p>80</p>
<p>81</p>
<p>82</p>
<p>83</p>
<p>84</p>
<p>85</p>
<p>86</p>
<p>87</p>
<p>88</p>
<p>89</p>
<p>90</p>
<p>91</p>
<p>92</p>
<p>93</p>
<p>94</p>
<p>95</p>
<p>96</p>
<p>97</p>
<p>98</p>
<p>99</p>
<p>100</p>
<p>101</p>
<p>102</p>
<p>103</p>
<p>104</p>
<p>105</p>
<p>106</p>
<p>107</p>
<p>108</p>
<p>109</p>
<p>110</p>
<p>111</p>
<p>112</p>
<p>113</p>
<p>114</p>
<p>115</p>
<p>116</p>
<p>117</p>
<p>118</p>
<p>119</p>
<p>120</p>
<p>121</p>
<p>122</p>
<p>123</p>
<p>124</p>
<p>125</p>
<p>126</p>
<p>127</p>
<p>128</p>
<p>129</p>
<p>130</p>
<p>131</p>
<p>132</p>
<p>133</p>
<p>134</p>
<p>135</p>
<p>136</p>
<p>137</p>
<p>138</p>
<p>139</p>
<p>140</p>
<p>141</p>
<p>142</p>
<p>143</p>
<p>144</p>
<p>145</p>
<p>146</p>
<p>147</p>
<p>148</p>
<p>149</p>
<p>150</p>
<p>151</p>
<p>152</p>
<p>153</p>
<p>154</p>
<p>155</p>
<p>156</p>
<p>157</p>
<p>158</p>
<p>159</p>
<p>160</p>
<p>161</p>
<p>162</p>
<p>163</p>
<p>164</p>
<p>165</p>
<p>166</p>
<p>167</p>
<p>168</p>
<p>169</p>
<p>170</p>
<p>171</p>
<p>172</p>
<p>173</p>
<p>174</p>
<p>175</p>
<p>176</p>
<p>177</p>
<p>178</p>
<p>179</p>
<p>180</p>
<p>181</p>
<p>182</p>
<p>183</p>
<p>184</p>
<p>185</p>
<p>186</p>
<p>187</p>
<p>188</p>
<p>189</p>
<p>190</p>
<p>191</p>
<p>192</p>
<p>193</p>
<p>194</p>
<p>195</p>
<p>196</p>
<p>197</p>
<p>198</p>
<p>199</p>
<p>200</p>
<p>201</p>
<p>202</p>
<p>203</p>
<p>204</p>
<p>205</p>
<p>206</p>
<p>207</p>
<p>208</p>
<p>209</p>
<p>210</p>
<p>211</p>
<p>212</p>
<p>213</p>
<p>214</p>
<p>215</p>
<p>216</p>
<p>217</p>
<p>218</p>
<p>219</p>
<p>220</p>
<p>221</p>
<p>222</p>
<p>223</p>
<p>224</p>
<p>225</p>
<p>226</p>
<p>227</p>
<p>228</p>
<p>229</p>
<p>230</p>
<p>231</p>
<p>232</p>
<p>233</p>
<p>234</p>
<p>235</p>
<p>236</p>
<p>237</p>
<p>238</p>
<p>239</p>
<p>240</p>
<p>241</p>
<p>242</p>
<p>243</p>
<p>244</p>
<p>245</p>
<p>246</p>
<p>247</p>
<p>248</p>
<p>249</p>
<p>250</p>
<p>251</p>
<p>252</p>
<p>253</p>
<p>254</p>
<p>255</p>
<p>256</p>
<p>257</p>
<p>258</p>
<p>259</p>
<p>260</p>
<p>261</p>
<p>262</p>
<p>263</p>
<p>264</p>
<p>265</p>
<p>266</p>
<p>267</p>
<p>268</p>
<p>269</p>
<p>270</p>
<p>271</p>
<p>272</p>
<p>273</p>
<p>274</p>
<p>275</p>
<p>276</p>
<p>277</p>
<p>278</p>
<p>279</p>
<p>280</p>
<p>281</p>
<p>282</p>
<p>283</p>
<p>284</p>
<p>285</p>
<p>286</p>
<p>287</p>
<p>288</p>
<p>289</p>
<p>290</p>
<p>291</p>
<p>292</p>
<p>293</p>
<p>294</p>
<p>295</p>
<p>296</p>
<p>297</p>
<p>298</p>
<p>299</p>
<div class="imgBox"><img src="./img/1.png" data-src="https://img1.baidu.com/it/u=3392591833,1640391553&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714" alt=""></div>
<div class="imgBox"><img src="./img/1.png" data-src="https://img1.baidu.com/it/u=3392591833,1640391553&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714" alt=""></div>
<div class="imgBox"><img src="./img/1.png" data-src="https://img1.baidu.com/it/u=3392591833,1640391553&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714" alt=""></div>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<script>
//图片懒加载
const images = document.querySelectorAll("img")
/*
const observer = IntersectionObserver => 观察目标对象与视口的交叉,可以用来决定img的src是否显示
observer.observe(DOM节点) => 观察DOM节点,观察动作
observer.unobserve(DOM节点) => 不再观察DOM节点,取消观察动作
IntersectionObserver
*/
//
const callback = imgss =>{
imgss.forEach(item=>{
// console.log(item);
if(item.isIntersecting){
const data_src = item.getAttribute('data-src')
img.setAttribute("src",data_src)
observer.unobserve(item)
console.log("触发");
}
})
}
const observer = new IntersectionObserver(callback);
images.forEach(item=>{
//观察每一张图片
observer.observe(item)
})
</script>
</body>
</html>
